This repository has been archived on 2023-08-16. You can view files and clone it, but cannot push or open issues or pull requests.
Omphaloskepsis/plugins/jetpack/scss/_utilities/mixins/_retina-background.scss

17 lines
785 B
SCSS
Raw Permalink Normal View History

2018-03-21 18:19:20 +00:00
// ==========================================================================
// Retina background
// ==========================================================================
@mixin retina-background ($url, $file-type, $width: auto, $repeat: repeat, $ratio: 1.5, $suffix: "@2x") {
background: url($url + "." + $file-type);
background-repeat: $repeat;
// Media queries from http://git.io/k-x0wA
@media only screen and (-webkit-min-device-pixel-ratio: $ratio),
only screen and (min--moz-device-pixel-ratio: $ratio),
only screen and (-o-min-device-pixel-ratio: #{$ratio}/1),
only screen and (min-resolution: #{round($ratio*96)}dpi),
only screen and (min-resolution: #{$ratio}dppx) {
background: url($url + $suffix + "." + $file-type);
background-size: $width auto;
}
}