Examples

Manually Set Background URL & Size

Regular, Debug Off

#logo-manual {
  background: url('../images/logo.png') no-repeat;

  @include hidpi {
    background-image: url('../images/logo_x2.png');
    background-size: 250px 188px;
  }
}
  

HiDPI, Debug On

#logo-manual-debug {
  background: url('../images/logo.png') no-repeat;

  $hidpi-debug: true;
  @include hidpi {
    background-image: url('../images/logo_x2.png');
    background-size: 250px 188px;
  }
  $hidpi-debug: false; // Set debug back to false
}
  

Auto-set Background URL & Size

Regular, Debug Off

#logo-auto {
  @include hidpi(logo);
}
  

HiDPI, Debug On

#logo-auto-debug {
  $hidpi-debug: true;
  @include hidpi(logo);
}
  

Non PNG images

JPEG, Debug Off

#example-jpg-extension {
  $hidpi-debug: false;
  @include hidpi(old-logo, jpg);
}
  

JPEG, Debug On

#example-jpg-extension-debug {
  $hidpi-debug: true;
  @include hidpi(old-logo, jpg);
}