CSS Trick: background property = scrolling div “windows”

Today CSS blew my mind.

I frequent the gaming website Polygon and recently they had a post for their Top 10 games of 2013. The list of games has a scrolling effect where each item in the list is a div with a background image, but the div scans across the image, which remains stationary, as if it’s a window to the content below. Now what shocked me is when I opened Developer Tools to see how they did it, I found the effect is achieved solely through CSS! Here’s a visual example I made of what I’m talking about:


Images taken from simpledesktops.com

They used the CSS background property like so:

background: url(img/1.jpg)center no-repeat;
background-attachment: fixed;
background-size: cover;
width: 100%;
height: 650px;

The background property sets the image on the div in addition to centering it and stopping it from repeating, background-attachment makes the image fixed position, and background-size fits the image to the screen. All this adds up to this “div window” effect that looks really cool without a lot of work.

To see my example in action, check out this link.