CSS background starting below variable header

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.

Answers


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/


Your question is not very clear, but this prevents your kitties from being chopped up.

#content {background: url('http://placekitten.com/g/200/300') repeat-x; min-height:300px;} 

Need Your Help

Call controller action from bootstrap modal in grails

jquery twitter-bootstrap grails

I am using grails 2.4.2 and bootstrap. Now I need to use bootstrap modal to edit a individual row on click a button. It means that when I will click the action button the modal will open with form

Cleaner way of manually updating multiple rows

sql mysql optimization coding-style

I wanted to see if there is a cleaner and more effective way of writing the SQL statement below. (MySQL)