homepage Welcome to WebmasterWorld Guest from 23.22.97.26
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, Moderator: open

CSS Forum

    
Overlapping div, hides underlying div background image
Blutarsky




msg:3995082
 5:21 pm on Sep 24, 2009 (gmt 0)

To make it short: can a div containing only text, hide the background image of a wrapping div? Seems so.
Before posting the code was wondering if it is a well known behavior....

something like:


<div style="background-image:url(img/shader.gif);
background-repeat:repeat-x;">
<div> some text here </div>
</div>

 

D_Blackwell




msg:3995111
 5:48 pm on Sep 24, 2009 (gmt 0)

Yes. Presumably, you only want to hide a portion of the background-image: of the wrapper <div>, otherwise no point of having it all.

Innumerable options for doing this. One sample is offered below using background-color: to demonstrate. Simply replace with images.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
#wrapper {
background-color: red;
width: 400px;
}

#inner {
background-color: teal;
width: 300px;
margin: 1em 50px; 0 1em;
padding: .5em;
}

#wrapper, #inner {
border: .1em solid #000;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="inner">
Lorem ipsum dolor sit amet, nulla magna, wisi ut vitae, tellus quis, arcu turpis. Ridiculus ornare pede neque feugiat arcu, eleifend sapien libero. Et neque amet, duis nulla class felis scelerisque eleifend, vel orci facilisis ullamcorper luctus. Nonummy ac gravida eros sociis congue morbi, primis adipiscing neque arcu eleifend, sollicitudin vitae risus pellentesque id dapibus lectus, nibh risus quisque donec molestie enim. Ligula lectus sed ac eleifend, curabitur sociis feugiat, et ultricies turpis nam, sed quis nec fames sit nisl, eget cras augue tincidunt sed. Elementum massa magna viverra, risus adipiscing felis nec vestibulum fusce, libero vehicula maiores, at feugiat nulla sed elit orci.
</div>
</div>
<!--##########

-->
</body>
</html>


Blutarsky




msg:3995197
 8:15 pm on Sep 24, 2009 (gmt 0)

What I'm trying to achieve is to have an outer DIV with a background image, in a way all the nested divs have a transparent background, sharing the same background picture of the outer DIV:

pseudocode:
* div wrapper with a background image
** inner div with transparent bg, some formatted text here
** other inner div here, transparent bg, other formatted text
* close the divs

Unfortunately the inner divs have a white background that hides the outer div background picture...

steve




msg:3995488
 8:19 am on Sep 25, 2009 (gmt 0)

In Blackwells example change the background-color on #inner to transparent, and add a background-image to #wrapper.

Tested in IE8, FF3.5 and Opera 9.64

Blutarsky




msg:3995569
 11:42 am on Sep 25, 2009 (gmt 0)

Actually your suggestions work seamlessly.... a more complex page with similar code is not working properly. This needs more investigation....

Blutarsky




msg:3995570
 11:43 am on Sep 25, 2009 (gmt 0)

I think I've got it.... I was using

background:transparent;

instead of

background-color:transparent;

Blutarsky




msg:3995575
 11:54 am on Sep 25, 2009 (gmt 0)

No.
Know what? It's a left float the spoils transparency...

Any hint?

swa66




msg:3996108
 6:40 am on Sep 26, 2009 (gmt 0)

I'd guess the float is long enough to stick out below the other non-floated divs ?
(or is last).
In that case, the float is not ruining any transparency, it is the parent not being as tall as you expect it to be. The thing is that parent are not supposed to stretch to encompass floated children.

To fix it: simply add just before you close the parent div an element that clears the foat and is not floated itself.
If you don't have e.g. a footer to do that with, you can simply add

<div>
...
floated element in here somewhere
...
<br class="clear" />
</div>


.clear {
clear:both;
}

Or search for "clearfix" it does the same all in CSS, but beware of the hacks most examples come with (you do not need them).

Blutarsky




msg:3996688
 8:28 pm on Sep 27, 2009 (gmt 0)

Ok it was an extra float mixing it up:
pseudo code:
* div with background image
** nested div floated (really no need to float)
*** nested div floated (needs to float)
*** nested div floated (needs to float)
**
*
removing the first float (I was told that a parent containing nested float divs should float) solved the problem!

swa66




msg:3996707
 9:13 pm on Sep 27, 2009 (gmt 0)

I was told that a parent containing nested float divs should float

I guees this was in reference to the fact that floated elements containing floated children do in fact stretch to encompass their children. But I'd be very careful using that too much as it'll lead to everything being floated.

The problem comes when you need something that floats don't do all that well.

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