Last Updated: February 25, 2016
· wnstn

CSS For Background Images

In trying to get an image to automatically cover the visible canvas without javascript, today I learned about:

background-size: cover;

replaces the need for a bunch of other hacks to get your background image to cover the canvas. Combine it with

height: 100%;
overflow: hidden;
width: 100%;

And you get a nice little element that's the size of the canvas. Position it absolutely and you're good to go.