Retina background images (Must know)

When creating a website that is optimized for Retina Displays, you'll want to make sure that you are updating all the images on your site so everything looks sharp. In addition to updating your images in HTML, you'll also want to update any background images that you have set in CSS. Background images are often used to create the template that is used throughout a website, so they are critical in optimizing for Retina Displays.

How to do it...

1. We'll start working with background images by creating two versions of an image just like we did for regular images. If you don't already have a good background texture to use there are a lot of great options at www.backgroundlabs.com. In your graphics editor resize the image to double the size that you'd like a single tile to be and save the file in the /images/ folder within the /retina/ folder as [e-mail]. For our example we'll use 250 x 150 pixels. Next, resize the image to 50 percent and save it as myBackground.jpg in the same folder.

2. Now let's add our background images to a web page to test them out. Create a new HTML document in your editor called backgroundTest.html and save it in the /retina/ folder. First, we'll add our CSS code into the file (it is typically a good idea to create a separate CSS file but for the example we'll add it in our HTML page).

   <style>
   .box { 
     height: 200px;
     width: 700px;
   }
   .bgRetina { 
     background: url(images/[e-mail]) repeat;
     background-size: 250px 150px;
   }
   .bgNormal {
     background: url(images/myBackground.jpg) repeat;
     background-size: 250px 150px;
   }
   </style>

3. This CSS code will create a box to display the background within and then apply our image to it. Make sure you enter the correct background-size dimensions for your image (based on the smaller of the two images). Next we'll add the HTML code as follows to our CSS:

   <div class="box bgRetina">Retina</div>
   <div class="box bgNormal">Normal</div>

4. Now we're ready to test out our Retina background. If you're on a Retina device load the page in your browser, otherwise copy the new files to your server and open them up in your browser. The first background will look much sharper on the Retina Display.

How it works...

The background image example works based on the same concept as creating a normal Retina image. You are filling an area with an image that contains double the amount of pixels needed for a normal display. The background-size property tells the browser what size each tile of the background should be. The same principles apply to all background images, even if they are not a repeating pattern.

There's more...

The background-size CSS property was added in CSS Version 3. This means it is not supported in older browsers such as Internet Explorer 7 and 8. In these browsers the background will be larger than intended, which is still functional but not ideal. To support these browsers, you'll want to only use Retina background images as part of a media query. We will cover this in more detail in the CSS Media Queries recipe.