Add retina graphics to your website

markup.html

<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:[email protected]">Contact</a>
    </nav>
  </header>
</div> <!-- /#page -->

style-01.scss

#page > header
{
  .logo
  {
    width: $logo-width;
    height: $logo-height;
    background: image-url("logo.png") no-repeat center center;
    @include background-size(100%);
  }
}

style-02.scss

#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("[email protected]");
    }
  }
}