-
-
Save twe4ked/1432554 to your computer and use it in GitHub Desktop.
@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; } } |
@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.
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' );
Merci !
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);
}
}
}
hi, how can i add image url path to this mixin ?
-moz-min-device-pixel-ratio should be min--moz-device-pixel-ratio
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?