http://mediaweb.rmu.edu/~djsst266/demo/fullscreen.html
Hey all, here’s a solution for a fullpage image background I found in the wild (in a chrome new tab replacement called ‘Momentum’).
It’ll work best for situations when you only need one pane/screen-worth of space. The benefit is that it seems to maximize the amount of image visible.
It works by grabbing each end of the div and stretching it to the edge of the screen.
If you really need to use it for multiple panes, change the ‘top’ attribute of each page to [(page number – 1) * 100vh], so page 1 is top:0; page 2 is top:100vh; page 3 is top:200vh; etc.
Here’s the code.
#fullscreen {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url(mountains.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}