Create a gist now

Instantly share code, notes, and snippets.

Add retina graphics to your website
<div id="page">
<header>
<a class="home" href="/"><div class="logo">&nbsp;</div></a>
<nav>
<a class="gallery" href="gallery.html">Gallery</a>
<a class="pricing" href="pricing.html">Pricing</a>
<a class="contact" href="mailto:hello@mycompany.com">Contact</a>
</nav>
</header>
</div> <!-- /#page -->
#page > header
{
.logo
{
width: $logo-width;
height: $logo-height;
background: image-url("logo.png") no-repeat center center;
@include background-size(100%);
}
}
#page > header
{
.logo
{
width: $logo-width;
height: $logo-height;
background: image-url("logo.png") no-repeat center center;
@include background-size(100%);
@media only screen and (-webkit-min-device-pixel-ratio: 2)
{
background-image: image-url("logo@2x.png");
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment