Book Image

Responsive Design High Performance

By : Dewald C Els, Dewald Els
Book Image

Responsive Design High Performance

By: Dewald C Els, Dewald Els

Overview of this book

Table of Contents (16 chapters)
Responsive Design High Performance
About the Author
About the Reviewers
Speeding Up Development with Design Concepts, Patterns, and Programs

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 has no real advantage; surely, the...