显示全屏图像，高度为100％，宽度为100％，但可以向下滚动

Question

I want to create a full screen image that let's me scroll down the page like on the apple site here.

http://www.apple.com/uk

You'll notice that by resizing the browser the image stays full screen but it allows you to scroll down to the footer.

Can this be done in jquery or does it need javascript?

The only bit of code i have so far is this css code that make the image full screen:

.content {
    height:100%;
    width:100%;
    background: url("http://america.aljazeera.com/content/ajam/watch/shows/the-stream/the-stream-officialblog/2013/9/16/indiana-ag-callsfordrugtestingofpregnantwomen/jcr:content/blog/mainpar/adaptiveimage/src.adapt.960.high.1379636395676.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
}

and here's a fiddle fiddle http://jsfiddle.net/XXHgJ/

if you scroll down the footer shows but the menu stays still, this needs to scroll up.

Answer 1

If you just want to make a full screen element, you could do it with jQuery:

jQuery:

function setDimensions(){
   var windowsHeight = $(window).height();
   $('#element').css('height', windowsHeight + 'px');
}

//when resizing the site, we adjust the heights of the sections
$(window).resize(function() {
    setDimensions();
});

setDimensions();

CSS

.content {
    background-image: url(yourURL);
    background-size:cover;

}

Living demo: http://jsfiddle.net/XXHgJ/7/

Answer 2

Is it something like this?... I did it with pure css after closely noticing that in the one for apple when the page resizes, the image size does not necessarily change.

<div>

    <div style="position:relative; background:green; ">
     <div style="position:absolute; top:30px; left:50px; margin:auto; width:250px; height:40px; text-align:center; padding-top:10px; background:black; color:#fff;">Menu goes here</div>
        <div><img src="http://america.aljazeera.com/content/ajam/watch/shows/the-stream/the-stream-officialblog/2013/9/16/indiana-ag-callsfordrugtestingofpregnantwomen/jcr:content/blog/mainpar/adaptiveimage/src.adapt.960.high.1379636395676.jpg" height="400" /></div></div>

    <div style="background:#fff; padding:30px;">Footer</div>


</div>

See Feddle: http://jsfiddle.net/HZbAt/

Hope it helps

Answer 3

on my page i have margin-top 80px which pushes the content down is their anything i can add to the code so this does not happen like -80px? This is for the jquery script