Background image is longer than the enclosing div

Question

On a customer website, I have to add a background image for only a contained region of the page (its real content part).

The problem is, if the content is short enough, then the image will be clipped. How would be possible to have the image completely visible? I have tried to add the "overflow" CSS attribute but unfortunately it did not help me.

Here is an example of the website I have to work on: http://www.sfp-pensioen.nl/werknemer/welkom The background image is on the div element with id="content".

On the specific link that I am sending it is not an issue because the content is long enough, but if you remove elements using firebug then the problem will become obvious.

ps: IE6 must be supported.

Answer 1

overflow for background-images is impossible, but you could set a min-height for content (or set the image in another div with lower z-index and position it abolutely to appear at the place you want - but thats a very bad solution)

Answer 2

The overflow attribute controls what happens to the div when the content is too big to fit - if you have a fixed-size div with some content that might overflow, you generally want the auto option. overflow has no effect on a background image.

For your case, it sounds like you want to specify a min-height on the content div. Note that this isn't supported by older browsers like IE6, which you may or may not care about. There are plenty of ways to work around this, though.

Answer 3

What you want is the 100% height you can achieve this with the following.

html {
    height: 100%;
}
body {
    height: 100%;
}
#content {
    height: 100%;
}

You need the min-height and the body needs a height so every child element of the body will follow the rule.

Also by adding min-height: 100%; to all css rules will solve all your problems for any grade A browser.

Answer 4

Following on from Graham's answer:

"height" in ie6 acts like "min-height" across other browsers.

min-height: 50px;
_height: 50px;

The example above will provide a cross browser minimum height of 50px. ie6 will read "_height" where other browsers will not. If you don't hacks, use a conditional statement.

Rich

Answer 5

you could either give a height to the id #content

or

apply the background:url("/images/Doelgroep-Background-Image.jpg") no-repeat scroll left top transparent; to #mainContent instead of #content

Answer 6

If you know the #sidebar or #main will always have a visual height the same or larger than the background image then you can simply add the background image to:

.sub #wrapper #mainContent {
background:url("/images/Doelgroep-Background-Image.jpg") no-repeat scroll 0 150px transparent;
}

instead of where it is an the moment on #content