Code Snippets

Optimize background images into retina display

Here is an example of changing an image to fit the retina display. More information can be found on this blog post.

We'll start with a simple div and an icon.

    #icon{
       width:50px;
       height:50px;
       background: url('../images/icon.png') centre no-repeat;
    }

And write the media query to replace the image.

  @media
  only screen and (-webkit-min-device-pixel-ratio : 2),
  only screen and (min-device-pixel-ratio : 2) {

    #icon{
       background-image: url('../images/icon-retina.png');
       -webkit-backgorund-size:50px 50px;
    }
  }

 

Resource Tags: