Retina (Hi-DPI) background images with CSS Media Queries

Posted Friday 4th Jan 2013 by James Bavington

Happy New Year and welcome to our first web design video blog of 2013. This week we’re going to show you how to work with high resolution CSS background images for Retina or Hi-DPI displays. This is something we believe will really trend and start to become standard practice in 2013. Particularly as last year saw the release of several new Hi-DPI devices like the Macbook Pros, iPads and Kindles.

In this mini-screenshot I took from the BBC Weather website, you can see a fuzzy 72Dpi Cloud icon alongside vector text at Retina resolution.

In this mini-screenshot I took from the BBC Weather website on my Retina Macbook, you can see a fuzzy 72Dpi Cloud icon alongside vector text at Retina resolution.

As you probably know, Retina screens typically have four pixels where you’d expect to see just one. This means that regular 72dpi raster graphics are doubled in size, look blurry and out of place .

Typography, CSS3, SVGs and Icon Fonts are paving the way for fast-loading, crisp HD design, however best-practice for working with embedded images is still an evolving practice.

Despite this, some great plugins have begun to emerge like retina.js and WP Retina x2 – which dynamically serve higher resolution images to those with Hi DPI screens.

Enter CSS3 Media Queries

The great news however, is that working with background images like sprites are much easier to work with. CSS3 brought us Media Queries which have become the building blocks of Responsive Web Design. In the same way media queries detect viewport size, they can also detect all current Hi-DPI resolutions with the following CSS:

@media 	only screen and (-webkit-min-device-pixel-ratio: 2),
		only screen and (-webkit-min-device-pixel-ratio: 1.5),
		only screen and (-moz-min-device-pixel-ratio: 2),
		only screen and (-o-min-device-pixel-ratio: 3/2),
		only screen and (-o-min-device-pixel-ratio: 2/1),
		only screen and (min--moz-device-pixel-ratio: 1.5),
		only screen and (min-device-pixel-ratio: 1.5),
		only screen and (min-device-pixel-ratio: 2) {
		/* Add your Retina Image Replacement Classes here. */
	}

If you’ve watched our video tutorial above, you’ll notice that in our example simply adding the above media query isn’t enough. Whilst this swaps the image for your high-resolution one, it doesn’t scale the image for you automatically.

Enter the CSS3 Background-Size Property

Introduced in CSS3, the background-size property allows you to specify the dimensions of  your background image, which will allow us to scale down the image so that it can the resolution matches that of the retina device. This can be done in the following ways:


background-size: 500px 200px; /* You can specify exact dimensions (width, height) */
background-size: 25% auto; /* You can specify dimensions by percentage relative to the container (width, height) */
background-size: cover; /* The cover value will automatically fill the area of the container the style is applied to */

Any of these three uses of the property will allow you to achieve the results, however I recommend specifying the size by pixel and only specifying the width. If you simply don’t specify the height, it will be automatically added proportionally to the width you specify. So, if you put it all together, like in our video tutorial, your completed CSS code should look something like this:

The Complete CSS Markup

div.logo {
	margin:0 auto;
	border:1px solid #666;
	width:400px;
	height:215px;
	background:url(/blog/videos/james_n_nick.jpg) no-repeat;
 }


@media 	only screen and (-webkit-min-device-pixel-ratio: 2),
		only screen and (-webkit-min-device-pixel-ratio: 1.5),
		only screen and (-moz-min-device-pixel-ratio: 2),
		only screen and (-o-min-device-pixel-ratio: 3/2),
		only screen and (-o-min-device-pixel-ratio: 2/1),
		only screen and (min--moz-device-pixel-ratio: 1.5),
		only screen and (min-device-pixel-ratio: 1.5),
		only screen and (min-device-pixel-ratio: 2) {
		
		 div.logo {
			background:url(/blog/videos/james_n_nick2x.jpg) no-repeat;
			background-size: 400px;
 		}
	}.

Is it worth it?

Yes, in my opinion it’s definitely worth going to the effort. Even if for just a few key items within your design like sprites or your website’s main logo. I also think it’s a fair assumption that devices sporting a Retina Display will more than likely use a browser that supports CSS3 and therefore media queries and the background-size property.

Producing two different resolution images in the place of one will take a little extra time, but the results do look fantastic. If you’re lucky enough to be browsing on a Retina screen right now, check out these examples online to see how web design is evolving:

  • Smashing Magazine’s Logo
    Although not served dynamically through this technique, Smashing Magazine’s site logo is embedded at retina size for all devices, which looks superb on Hi-DPI screens.
  • Campaign Monitor’s Homepage
    Campaign monitor have a lovely, contemporary homepage that is completely Retina compatible. Using the same Media Query and Background-Size combination in our example, they serve a separate and exclusive Retina Stylesheet.

By James Bavington

Creare's Web R&D Manager is a creative graduate and self-taught front-end developer. When not sat at a computer, he's either at Comic-con, driving his car or reading military history.

See all of posts.

Connect with James Bavington on Google+

James Bavington's latest tweets

  • http://www.eukhost.com/ eUKhost

    Thank you so much for the update.