Skip to content

Instantly share code, notes, and snippets.



Last active Dec 19, 2015
What would you like to do?
Small piece of JavaScript to detect a retina display and exchange `.icon-class` with `.icon-retina-class` to display retina images. Note that sprites should be aligned horizontally if you use Compass due to a bug.
<script type='text/javascript'>
$(document).ready(function() {
if (window.devicePixelRatio > 1) {
$.each($("[class^=icon-]"), function() {
var el = $(this), bp = el.css('background-position');
el.attr('class', el.attr('class').replace('n-', 'n-retina-')).css('background-position', bp);
<i class="icon-logo"></i>
[class^="icon-retina-"] {
/* General settings */
width: 11px;
height: 11px;
line-height: 14px;
display: inline-block;
vertical-align: text-top;
background-repeat: no-repeat;
/* ie7-restore-right-whitespace */
*margin-right: .3em;
/* Width and height of the non-retina sprite */
background-size: 930px 100px;
/* Individual settings for your elements */
.icon-logo, .icon-retina-logo {
width: 80px;
height: 20px;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment