Question

let me think, how can i explain my problem. i have a scrolling page with lots of div layers… one below the other! they background images have resolution of 1920×1080 px! but they should fill the complete background browser window. eg when im scaling the browser window the picture should scale itself.

ive seen a few jquery plugins who do a very good job but its important for me that the backgroundimage is defined in the css, because im using the inview.js and try to create the parallax effect.
is this possible?

thanks ted

Answer 1

You can use background-size: cover for this although it is a CSS3 property and some browsers will not support it.

http://www.w3schools.com/cssref/css3_pr_background-size.asp

Edit: A prefixed and fallback solution courtesy of CSS Tricks

html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}