Background images and media queries

We've taken a look at plugins such as picturefill.js for dynamic selection of varying images depending on the device size being used. This only affects HTML img elements. An often overlooked tweak is with background images.

The background-size property is very helpful for resizing background images on your page. However, like flexible images, this will still load the full-resolution image into your mobile and tablet devices. Not so great, right? Well, we know about media queries and we know about background images. So let's combine the two for a solution!

Consider this example:

.page {
    background: url('../img/page-bg.jpg');
}

Let's say page-bg.jpg is a beautiful, large, high-resolution image that we use on our website as a background for our page element. A div spans over the entire page. You can use a media query to resize the image using the background-size attribute, but that's exactly what you wouldn't want. This...