How to get this background effect?

  • Author
    Posts
  • #137996

    nablet
    Member

    I was reading this post on a game (Dreamfall: tlj) (http://prismatic.wordpress.com/2007/08/15/playing-in-a-dream-world/) while looking fo walkthrough

    How did he get the picture to do that and the text to wrap around only part of it??

    I want that look!

    #138127
    #138134

    devblog
    Member

    The author of that blog created a <div> with a background image, then, created another <div> with the dimensions of the woman and made it float to the right.

    The code looks something like this:

    <div style='background: [properties here]'>
    <div style='[values you want to emulate your image so your text will wrap around it'>
    </div>
    <p>
    text text text text
    </p>
    <p>
    ext text text text
    </p>
    <p>
    ext text text text
    </p>
    </div>

    Hope this answers your question.

    #138140

    timethief
    Member

    @devblog
    Interesting but I thought that <div> tags were stripped by the software here.
    Is that no longer the case?

    #138155

    devblog
    Member

    Edit: What I previously wrote doesn’t apply anymore. Apparently I was doing something wrong… The inline styles don’t get stripped. I just replicated that effect.

    So, no… the div tags don’t get stripped.

    I’ll be deleting the post soon

    #138156

    atthe404
    Member

    Oh. They now do not get stripped? And they what? Forgot to mention it. ?

    #138157

    devblog
    Member

    yeah, it seems they did forget… who knows since when this has been enabled…

    #138158

    timethief
    Member

    It’s great to hear this long standing bug has been fixed. I’ll update the threads in the forum search box starting with this one https://en.forums.wordpress.com/topic.php?id=11555

    #138160

    mark
    Staff

    There are no div tags in the posts indicated.

    It was also no bug.

    #138162

    devblog
    Member

    Yes there are, Mark. Unless you’re referring to some different posts, the source code clearly shows this:

    <div style="background:url('http://prismatic.files.wordpress.com/2007/08/dreamfall.png') no-repeat top right;">
    <div style="width:115px;height:350px;float:right;"></div>
    Dreamfall: The Longest Journey ...

    They’re in my sample post and in the original one.

    Addendum
    I created another test post with some div tags in it

    #138165

    atthe404
    Member

    @mark: What do you think about publishing a changelog for recording the 1001 inevitable tweaks on WP dot com. ?

    #138168

    mark
    Staff

    @devblog – I see, you are correct :)
    I now understand how to do it.
    Sorry for getting things wrong.

    @atthe404 – I see it – and it’s huge. But apparently the trick has been there for a long time….

    #138181

    prismatic
    Member

    Hey, cool! Someone’s actually interested in some markup used on my blog.

    Actually, I also thought that div’s were stripped (or converted to p’s) but I did know that inline styles worked – for some things. I tried, and it worked.

    To make the post in question, I started off by using a floated img with negative left and bottom margins and no border. (The k2-lite theme defines a border by default.) This worked in Firefox but the floating img was displayed above the text in I.E. 6, even though the img tag appeared before the text in the markup. To fix this, I had to use a good ol’ div-with-background-and-placeholder trick. I was annoyed about this because it meant that I had to wrap the whole post in a div, instead of simply putting a nice, cohesive img tag above it.

    Just in case you’re interested, the image came from a Dreamfall desktop background, which I photoshoped a bit to make it suitable.

    Have fun!

The topic ‘How to get this background effect?’ is closed to new replies.