Nesting DIVs and background image

[stefanmhodgson]

Hello there,

Got a website, basically, I have a div called mainHolder. This holds two columns: LeftColumn and RightColumn. I want one big background image to be visible behind the left and right columns. I have set the background image to be back_bg.jpg and left the two columns to have background:none;

Why is the background image of back_bg.jpg not showing through the column divs. I have even tried making a transparent gif and it didn't work! ARRrrgh, its driving me up the wall!

Any help would be much appreciated, ta much

Stefan

Code below:


#mainHolder{
background:url(../images/back_bg.jpg) repeat;
width:868px;
margin:0;
padding:0;
}
#leftcolumn{
background:none;
margin:0;
float:left;
padding:170px 102px 30px 50px;
width:682px;
voice-family:"\"}\"";
voice-family:inherit;
width:530px;
}
#rightcolumn{
background:none;
margin:0;
float:right;
width:186px;
}

[soulwire]

Look up clearix. At the moment, because you are using floats, nothing is pushing out the height of your background div, so it is there, its just 0px high. You want it to stretch with your internal divs, but by using float this will not happen, at leat in some browsers. Clearfix for FF should do it. or try setting your bg div to display:block and height:400px and see what happens.

[Surrogate]

Hello there,

Got a website, basically, I have a div called mainHolder. This holds two columns: LeftColumn and RightColumn. I want one big background image to be visible behind the left and right columns. I have set the background image to be back_bg.jpg and left the two columns to have background:none;

Why is the background image of back_bg.jpg not showing through the column divs. I have even tried making a transparent gif and it didn't work! ARRrrgh, its driving me up the wall!

Any help would be much appreciated, ta much

Stefan

Code below:


#mainHolder{
background:url(../images/back_bg.jpg) repeat;
width:868px;
margin:0;
padding:0;
}
#leftcolumn{
background:none;
margin:0;
float:left;
padding:170px 102px 30px 50px;
width:682px;
voice-family:"\"}\"";
voice-family:inherit;
width:530px;
}
#rightcolumn{
background:none;
margin:0;
float:right;
width:186px;
}

Floaters take no space. So of course the background does not fill it.

Add a div under the left and right colum, and give it "clear: both;" in its CSS. (If you want a footer, use this div as the footer aswell, else just leave it empty)

[monitoiul]

or you could try adding another holder div inside the mainHolder like so:

#anotherHolder {
margin: 0;
padding:0;
overflow: hidden;
width: 100%
}

and the html would be smth like

<div id="mainHolder">
<div id="anotherHolder">

ps: looky here: http://www.quirksmode.org/css/clearing.html