CSS image-set

• 1.  First, we'll create an HTML document called imagesetTest.htmlinside the /retina/folder to test our images. Inside of the basic HTML structure, add the CSS code to create a box and backgrounds to apply to it.

<style>
.box {
height: 200px; 
width: 700px;
}
.background {
background: url(images/myBackground.jpg);
background: -webkit-image-set(url(images/myBackground.jpg) 1x, 
url(images/myBackground@2x.jpg) 2x);
}
.backgroundNormal {
background: url(images/myBackground.jpg);
}
</style>

• 2.  Then create some divtags in HTML with your two backgrounds to test them out.

<div class="box backgroundNormal" />
<div class="box background" />

• 3.  If you are working on a Retina device (running Safari 6+, Chrome 21+, or another browser with image-setsupport) you will be able to open this page locally; if not, upload the folder to your web server and open the page on your device. You'll notice that the second background is much sharper than the first.