hidpi()
is a Sass mixin that seamlessly serves high resolution background images to high density (Retina-like) displays.
#logo-manual { background: url('../images/logo.png') no-repeat; @include hidpi { background-image: url('../images/logo_x2.png'); background-size: 250px 188px; } }
#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 }
#logo-auto { @include hidpi(logo); }
#logo-auto-debug { $hidpi-debug: true; @include hidpi(logo); }
#example-jpg-extension { $hidpi-debug: false; @include hidpi(old-logo, jpg); }
#example-jpg-extension-debug { $hidpi-debug: true; @include hidpi(old-logo, jpg); }