Overlapping div, hides underlying div background image

Forum Moderators: not2easy

Message Too Old, No Replies

Overlapping div, hides underlying div background image

Blutarsky

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

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

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

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

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

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

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

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

Any hint?

swa66

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

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

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.