As usual during my internet surfing I have found a very good tutorial to provide background image retina/no-retina by sass mixin function.

You can find the original article here

Here I reported it:


Like me you are a front-end ninja and you follow the DRY principes. Here is a pretty cool mixin to generate a background image for retina display.

I Suppose you have already defined a variable $retina somewhere in your scss files.

  1. $retina: "only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)";


  1. @mixin retina-background-image($file, $type, $width, $height) {
  2.   background-image: url($file + '.' + $type);
  3.   @media #{$retina} {
  4.     background-image: url($file + '@2x.' + $type);
  5.     @include background-size($width, $height);
  6.   }
  7. }


You just define the image path, the image type and eventually the background-size

  1. @include retina-background-image("images/video", "png", 50%, 50%);