Welcome to WebmasterWorld Guest from 54.160.221.82

Forum Moderators: not2easy

Message Too Old, No Replies

Overlapping div, hides underlying div background image

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

New User

5+ Year Member

joined:July 22, 2009
posts: 39
votes: 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>
5:48 pm on Sept 24, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 29, 2003
posts: 1676
votes: 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>

8:15 pm on Sept 24, 2009 (gmt 0)

New User

5+ Year Member

joined:July 22, 2009
posts: 39
votes: 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...

8:19 am on Sept 25, 2009 (gmt 0)

Preferred Member

10+ Year Member

joined:Mar 14, 2003
posts:508
votes: 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

11:42 am on Sept 25, 2009 (gmt 0)

New User

5+ Year Member

joined:July 22, 2009
posts:39
votes: 0


Actually your suggestions work seamlessly.... a more complex page with similar code is not working properly. This needs more investigation....
11:43 am on Sept 25, 2009 (gmt 0)

New User

5+ Year Member

joined:July 22, 2009
posts:39
votes: 0


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

background:transparent;

instead of


background-color:transparent;
11:54 am on Sept 25, 2009 (gmt 0)

New User

5+ Year Member

joined:July 22, 2009
posts:39
votes: 0


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

Any hint?

6:40 am on Sept 26, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 7, 2003
posts:4783
votes: 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).

8:28 pm on Sept 27, 2009 (gmt 0)

New User

5+ Year Member

joined:July 22, 2009
posts:39
votes: 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!
9:13 pm on Sept 27, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 7, 2003
posts:4783
votes: 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.