/**
* Allows you to use retina images at various pixel densities. * Examples: * * @include retina(/images/mypic.jpg, 2); * @include retina(/images/mypic.jpg, 3, 100px 100px, left top no-repeat transparent); * * @param {Value} $path The path to the file name minus extension. * @param {Number} $cap: 2 The highest pixel density level images exist for. * @param {Value} $size: auto auto The intended width of the rendered image. * @param {Value} $extras: null Any other `background` values to be added. */
.bg {
background: url("../ipad.png") center center no-repeat; }
.bg2 {
/* * Set a counter and get the length of the image path. */ /* * Loop ver the image path and figure out the * position of the dot where the extension begins. */ /* * If we were able to figure out where the extension is, * slice the path into a base and an extension. Use that to * calculate urls for different density environments. Set * values for different environments. */ /* * Set a base background for 1x environments. */ background: url("../ipad.png") center center no-repeat; background-size: 300px 149px; /* * Create an @2x-ish media query. */ /* * Create media queries for all environments that the user has * provided images for. */ /* * If anything went wrong trying to separate the file from its * extension, set a background value without doing anything to it. */ } @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) { .bg2 { background: url("../ipad@2x.png") center center no-repeat; background-size: 300px 149px; } } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .bg2 { background: url("../ipad@2x.png") center center no-repeat; background-size: 300px 149px; } }
.bg3 {
/* * Set a counter and get the length of the image path. */ /* * Loop ver the image path and figure out the * position of the dot where the extension begins. */ /* * If we were able to figure out where the extension is, * slice the path into a base and an extension. Use that to * calculate urls for different density environments. Set * values for different environments. */ /* * Set a base background for 1x environments. */ background: url("../ipad.png") center center no-repeat; background-size: 300px 149px; /* * Create an @2x-ish media query. */ /* * Create media queries for all environments that the user has * provided images for. */ /* * If anything went wrong trying to separate the file from its * extension, set a background value without doing anything to it. */ } @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) { .bg3 { background: url("../ipad@2x.png") center center no-repeat; background-size: 300px 149px; } } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .bg3 { background: url("../ipad@2x.png") center center no-repeat; background-size: 300px 149px; } } @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) { .bg3 { background: url("../ipad@3x.png") center center no-repeat; background-size: 300px 149px; } }