Question

Question

I’d like the CSS background texture for my content area to begin immediately after a variable-height header. The texture has a natural height of 900px and is graduated to a flat color, so if it fits in the available space between content-start and body-end, the whole texture should be displayed. The texture shouldn’t artificially expand the content area or cause unnecessary scroll, but scroll should still appear when content is longer than fits in the page.

JSFiddle

On request, here’s a JSFiddle of my issue. Since there’s really only one DOM element in the question, I think the fiddle doesn’t clarify much. http://jsfiddle.net/AbEUe/5/

What doesn’t work

#contentAndBackground {
    padding-bottom: 900px;
    margin-bottom: -900px;
    background: url('my900pxHighImage.png') repeat-x;
}

The above ensures the whole image is shown, but the negative margin doesn’t keep the unnecessary scrollbars away as I’d hoped.

#contentAndBackground {
    min-height: 900px;
    background: url('my900pxHighImage.png') repeat-x;
}

Same problem. The whole image is shown, but scrollbars are always showing.

I’d like to avoid using JavaScript that needs to handle screen resizing.

Answer 1

I think I did it: http://jsfiddle.net/AbEUe/7/

I have created 2 container divs, both have a height of 100%.

• The first contains header and background, and has overflow:hidden so the background is stopped at the bottom.

• The second contains header and content, and because of use of positioning this one is on top of the first container, and it can stretch to more than 100% (if the amount of text requires that).

You can see you have to render the header twice, but that won’t matter because the first isnt visible.

Edit:

Solved the last problem (see comment) by also setting the background to the content div. See http://jsfiddle.net/AbEUe/8/