Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link
Owner Author

commented Jul 2, 2012

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

:-)

@soulrider911

This comment has been minimized.

Copy link

commented Jan 7, 2013

Brilliant!

@ungoldman

This comment has been minimized.

Copy link

commented Jan 30, 2013

👍 thanks!

@ghost

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

commented Apr 3, 2013

Heck yes. Very nice.

@mlynch

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

commented Aug 23, 2013

Comes in really handy, thank you so much.

@eprothro

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

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

This comment has been minimized.

Copy link

commented May 29, 2014

Merci !

@benjitastic

This comment has been minimized.

Copy link

commented Jun 12, 2014

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

This comment has been minimized.

Copy link

commented Mar 9, 2015

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

@dustincurrie

This comment has been minimized.

Copy link

commented May 28, 2015

-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
You can’t perform that action at this time.