/**

* Allows you to use retina images at various pixel densities.
* Examples:
*
*   .retina(/images/mypic.jpg, 2);
*   .retina(/images/mypic.jpg, 3, 100px 100px, left top no-repeat transparent);
*
* @param  {String} $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 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.
 */

} @media (-webkit-min-device-pixel-ratio: 1.5), (min–moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) {

.bg2 {
  background: url(../ipad@2x.png) center center no-repeat;
  background-size: 300px 149px;
}

} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2 * 96dpi) {

.bg2 {
  background: url(../ipad@2x.png) center center no-repeat;
  background-size: 300px 149px;
}

} .bg3 {

/*
 * 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.
 */

} @media (-webkit-min-device-pixel-ratio: 1.5), (min–moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) {

.bg3 {
  background: url(../ipad@2x.png) center center no-repeat;
  background-size: 300px 149px;
}

} @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2 * 96dpi) {

.bg3 {
  background: url(../ipad@2x.png) center center no-repeat;
  background-size: 300px 149px;
}

} @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3 * 96dpi) {

.bg3 {
  background: url(../ipad@3x.png) center center no-repeat;
  background-size: 300px 149px;
}

}