Skip to content

Instantly share code, notes, and snippets.

@apfelbox
Created October 23, 2013 14:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save apfelbox/7120371 to your computer and use it in GitHub Desktop.
Save apfelbox/7120371 to your computer and use it in GitHub Desktop.
Retina CSS example
<!doctype html>
<html>
<head>
<title>CSS Sprites + Retina</title>
<meta charset="utf-8" />
<style type="text/css">
.with-retina,
.without-retina {
background-color: transparent;
background-repeat: no-repeat;
background-position: 0 -150px;
width: 117px;
height: 36px;
}
.with-retina {
background-image: url("sprite_sheet@2x.png");
background-size: 196px 215px;
}
.without-retina {
background-image: url("sprite_sheet.png");
}
</style>
</head>
<body>
<h1>Without Retina</h1>
<div class="without-retina"></div>
<h2>With Retina</h2>
<div class="with-retina"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment