I'm trying to position one div after another, easily achieved when the divs are positioned relatively, but I want each of these divs to fit the size of the browser.
I've very roughly achieved it using this method:\[code\]<div id="container"><div id="test-1" style="background: url(../images/background-v2.jpg)"></div><div id="test-2" style="background: url(../images/background-v2.jpg)"></div></div>\[/code\]CSS:\[code\]#test-1 { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}#test-2 { position: absolute; top: 101%; left: 0px; width: 100%; height: 100%; background: no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}\[/code\]So #test-1 scales to fit the size of the browser then when you scale down #test-2 also fits the size of the browser and so on. But I've achieved these by positioning them absolutely and setting #test-2 101% from the top, which I don't want to do every time I add another div, thus the reason I'd like them positioned relatively while still retaining the scale to browser background images. If that is at all possible? Might it require jQuery?
I'm completely stumped on this one!
There was something else I couldn't figure out with these background images as well, as they're nested inside divs, when the browser size gets below about 750px in width, the background images become fixed, is there anyway they can always stay centre to the browser, basically overflowing the image off the left of the browser?
I've very roughly achieved it using this method:\[code\]<div id="container"><div id="test-1" style="background: url(../images/background-v2.jpg)"></div><div id="test-2" style="background: url(../images/background-v2.jpg)"></div></div>\[/code\]CSS:\[code\]#test-1 { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}#test-2 { position: absolute; top: 101%; left: 0px; width: 100%; height: 100%; background: no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}\[/code\]So #test-1 scales to fit the size of the browser then when you scale down #test-2 also fits the size of the browser and so on. But I've achieved these by positioning them absolutely and setting #test-2 101% from the top, which I don't want to do every time I add another div, thus the reason I'd like them positioned relatively while still retaining the scale to browser background images. If that is at all possible? Might it require jQuery?
I'm completely stumped on this one!
There was something else I couldn't figure out with these background images as well, as they're nested inside divs, when the browser size gets below about 750px in width, the background images become fixed, is there anyway they can always stay centre to the browser, basically overflowing the image off the left of the browser?