Need help? Check out our Support site, then


How to get this background effect?

  1. 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!

  2. 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.

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

  4. 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

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

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

  7. 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 http://en.forums.wordpress.com/topic.php?id=11555

  8. There are no div tags in the posts indicated.

    It was also no bug.

  9. 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

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

  11. @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....

  12. 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!

Topic Closed

This topic has been closed to new replies.

About this Topic