Category: ARTM3210 HTML Toolbox

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;
}

Hi all! I put together a video tutorial for completing the challenge I made and other static (not moving) challenges. It’s roughly 45 minutes long, and talks about a technique for rapid development.

The core principle is to Approximate in your editor, Refine in Chrome (or Firefox), and Copy back to your editor. As you practice iterating (building versions), you’ll get much faster at designing these.

You can find this video and more on my page. If you have any questions, comments, or things you want me to cover in the future, just email me.

https://www.youtube.com/watch?v=e9uzIaCSZWU