How to get this background effect?
-
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!
-
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.
-
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
-
-
-
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
-
-
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 -
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.
WordPress.com Forums 