homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Background Wrapping
Is it possible to wrap the background color with the text?

5+ Year Member

Msg#: 4323669 posted 9:44 pm on Jun 8, 2011 (gmt 0)

I'm busy designing a site that requires the following style:
[imageshack.us ]

The problem i'm having is trying to wrap the background around the text that is there.

The text in that area will come from twitter, so I can't separate each line-break before hand.

Is there any way I can get the background to wrap around the text as in the image?

This is the closest I can get. (note the width of each line is the same)
[imageshack.us ]

Thanks for viewing.



WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

Msg#: 4323669 posted 11:41 pm on Jun 8, 2011 (gmt 0)

I'm not sure your link is showing me the same thing it's showing you. Is the text supposed to be an image or a text string?

Can you set the text's own background-color to "transparent", or will the image be too dark (or too light, or too unpredictable) for readability?

If you can't give the text a transparent background, another approach that might work is:

span.opaque {color: inherit; background-color: white} /* or whatever your non-image background color really is */

Wrap the text in this span. If it needs to be inside a paragraph or other block-level element, set its background-color to transparent (I believe this is the default, but don't take chances) so the background image shows through. This works because "white" and "transparent" are different things, but the difference is only apparent when there's a background-image involved.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved