Retina background images

• 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 myBackground@2x.jpg. For our example we'll use 250 x 150 pixels. Next, resize the image to 50 percent and save it as myBackground.jpgin 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.htmland 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/myBackground@2x.jpg) 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-sizedimensions 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.