Skip to content

Instantly share code, notes, and snippets.

@twe4ked
Created December 5, 2011 06:27
  • Star 51 You must be signed in to star a gist
  • Fork 19 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save twe4ked/1432554 to your computer and use it in GitHub Desktop.
FREE! Sass (SCSS) mixin for including retina images (useful when developing for iOS).
@mixin background-image-retina($file, $type, $width, $height) {
background-image: url($file + '.' + $type);
@media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
& {
background-image: url($file + '@2x.' + $type);
-webkit-background-size: $width $height;
}
}
}
// Example
#foo {
@include background-image-retina('foobar', 'png', 10px, 20px);
background: repeat;
}
#foo {
background-image: url("foobar.png");
background: repeat; }
@media (-webkit-min-device-pixel-ratio: 2) {
#foo {
background-image: url("foobar@2x.png");
-webkit-background-size: 10px 20px; } }
@jgillman
Copy link

jgillman commented Jul 2, 2012

This is great! I can't currently use Compass (long story) but this looks like it'll work really well for me.

In your media query you can also support Firefox with:
@media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {

@twe4ked
Copy link
Author

twe4ked commented Jul 2, 2012

Cool, glad you found it helpful @jgillman. I've added your fix for Firefox.

:-)

@soulrider911
Copy link

Brilliant!

@ungoldman
Copy link

👍 thanks!

@dopa
Copy link

dopa commented Mar 10, 2013

This works better for me in the latest Safari, Firefox and Chrome (note the min-resolution and background-size changes).

/* mixin for retina background images */
@mixin background-image-retina($file, $type, $width, $height) {
  background-image: url($file + '.' + $type);

  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 144dpi) {
    & {
      background-image: url($file + '@2x.' + $type);
      background-size: $width $height;
    }
  }
}

@bishless
Copy link

bishless commented Apr 3, 2013

Heck yes. Very nice.

@mlynch
Copy link

mlynch commented Aug 3, 2013

Awesome, thanks for the great snippet. I added width: and height: properties to the mixin to set those as well.

@muddymatches
Copy link

Comes in really handy, thank you so much.

@eprothro
Copy link

eprothro commented Nov 4, 2013

For those not wanting to manually create their sprite classes for each icon, it is possible to create sprite maps for 1x and 2x icons to be used on retina devices using the same, automatically generated, style classes:

Compass Retina Spriting

@hced
Copy link

hced commented Feb 13, 2014

Doesn't this load resources twice on retina devices? I.e. will foobar.png be skipped in the gist's example on a retina device?

@gerwitz
Copy link

gerwitz commented Mar 24, 2014

@hced: yes, the media query for "retina" displays will override the base style during CSS parsing; no browser to my knowledge is so aggressive as to fetch specified assets before processing all rules.

@Bobz-zg
Copy link

Bobz-zg commented Apr 29, 2014

Can I maybe just suggest use of:

background-image: image-url

Which will then let you use images that are in images_dir, instead of need to add path every time.

@include at2x( 'bghead-xs', 'jpg' );

@apadeloup
Copy link

Merci !

@benjitastic
Copy link

This is great. Agree with Bobz-zg on using image-url. I also made $width and $height optional by defaulting to 100% since that's a common value for a background image that is taking up the full dimensions of its element.

Using scss mixin for background-size also and including non-vendor min-device-pixel-ratio too for future-proofing.

@mixin background-image-retina($file, $type, $width: 100%, $height: 100%) {
  background-image: image-url($file + '.' + $type);
  @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
    & {
      background-image: image-url($file + '@2x.' + $type);
      @include background-size($width $height);
    }
  }
}

@cinghaman
Copy link

hi, how can i add image url path to this mixin ?

@dustincurrie
Copy link

-moz-min-device-pixel-ratio should be min--moz-device-pixel-ratio

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment