CSS: Background Issues. Is this possible?

Question

Thanks for your help in advance.

Here is PNG of the layout: Website Layout

The Second Section (with the dark grey background) is giving me problems. Below is the CSS I am using for the background.

#mainbg {
width:100%;
height:450px;
padding-top:25px;
background-image:url(../images/mainbg.png);
background-color:#303030;
background-position:top;
background-repeat:repeat-x;

}

The background displays, (although it won't display unless I set a min-height, which doesn't work for IE6 anyway), and everything works, until I get content that stretches beyond say 450px.

After that, the content just spills over into the footer, and the background doesn't stretch. I don't want the IMAGE to stretch, just for the image to end and the background colour to continue on as a plain background fitting to the content.

How do I set the background height for this div so that it stretches to accommodate the content, whilst only displaying the background image once on the y axis (while still repeating on the x axis).

I play around with other height and inherits and autos, but setting any of those just means the image does not display.

Help, this is driving me insane!

Answer 1

You have two problems:

1. It is forcing you to set a minimum height because you don't have content in it yet. Imagine an empty div. It will be as wide as the screen, since it's block level, but as tall as the text, which is nothing. So you don't need a minimum height, you just need a height or some actual content.

2. The background will only take up the space that the div is taking up. If the color and the image stop, that means the div has stopped. Try setting "overflow: scroll" just to see where the cutoff really is..

One thing that will make your life a lot easier with CSS is to not try to set everything all at once and make sure layout is good, then worry about cosmetics like background images and colors. Try give the troublesome div a background color of orange and a blue border. This will give you perfect idea of when things start and stop. Once you know the color is lined up, then try the background image.