Mixin for Retina Images

Supplemental 407 views
0 Flares 0 Flares ×

Using this mixin you can combine media queries and normal CSS image replacement to send high resolution images to retina devices and standard resolution images everywhere else. At first please make a standard resolution image ex: logo.png and a high resolution image ex: logo-2x.png. If it’s a retina display, add -2x after images name and set background-size.

Please note your CSS code might be longer than you expected when it’s complied if you have many retina images. If so, please avoid to use this mixin then code them in the same place.

Define @mixin

@mixin imgRetina($image, $extension, $width, $height) {
     background: url($image + '.' + $extension) no-repeat;
     width: $width;
     height: $height;

     @media (min--moz-device-pixel-ratio: 1.3),
           (-o-min-device-pixel-ratio: 2.6/2),
           (-webkit-min-device-pixel-ratio: 1.3),
           (min-device-pixel-ratio: 1.3),
           (min-resolution: 1.3dppx) {    
                background-image: url($image + '-2x' + '.' + $extension) no-repeat;
                background-size: $width $height;

Usage with @include

.logo {
     @include imgRetina(logo, png, 100px, 40px);


.logo {
  background: url(logo.png) no-repeat;
  width: 100px;
  height: 40px;
@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6/2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
  .logo {
    background-image: url(logo-2x.png) no-repeat;
    background-size: 100px 40px;
Provided by: Web Creator Box
Tagged with:
Posted in Sass


Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

No Trackbacks.


Register | Lost your password?
0 Flares Twitter 0 Facebook 0 Google+ 0 0 Flares ×