Switching CSS sprite sheets for retina displays: images come out twice as large

Question

I'm using CSS sprite sheets for a page I'm creating for mobile devices. I've got the layout how I want it, and here's the CSS I'm using for that (this looks fine on Chrome Canary's iPhone 3GS emulator):

div#logo {
    background: url('/static/images/iphone/iphone_landing_sprites_small.png') -114px 0px no-repeat;
    display: inline-block;
    width: 90px;
    height: 44px;
    display:block;
    float:right;
    margin:10px;
}

div#stars {
    background: url('/static/images/iphone/iphone_landing_sprites_small.png') -114px -46px no-repeat;
    display: inline-block;
    width: 71px;
    height: 12px;
}

div#iPhone {
    background: url('/static/images/iphone/iphone_landing_sprites_small.png') 0px 0px no-repeat;
    display: inline-block;
    float:left;
    width: 112px;
    height: 238px;
    margin-top: 54px;
}

div#separator {
    background: url('/static/images/iphone/iphone_landing_sprites_small.png') -114px -60px no-repeat;
    display: inline-block;
    width: 1px;
    height: 53px;
}

Of course, when viewing this on a Retina display the images come out slightly pixellated. I followed the advice in this tutorial for switching sprite sheets for different display densities, and added this:

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (min--moz-device-pixel-ratio: 1.5),
    only screen and (min-resolution: 240dppx) {

    div#logo {
        background-image: url('/static/images/iphone/iphone_landing_sprites.png');
        background-position: -226px 0px;
    }

    div#stars {
        background-image: url('/static/images/iphone/iphone_landing_sprites.png');
        background-position: -226px -91px;
    }

    div#iPhone {
        background-image: url('/static/images/iphone/iphone_landing_sprites.png');
        background-position: 0px 0px;
    }

    div#separator {
        background-image: url('/static/images/iphone/iphone_landing_sprites.png');
        background-position: -226px -117px;
    }
}

So now my page still displays fine on the iPhone 3GS simulator (since the @media switch does nothing to it) but when looking at it from an iPhone 4 simulator the images come through as double the size. The layout stays the same (the frames displaying the images are the same size) but the images are cropped so you can only see the top-left quarter of each image.

Is there some other attribute I need to specify to make the images squeeze into the double-density pixels while maintaining the same size on the screen?

Hav you tried in a real Retina device??? I don't know if a simulator can be able to reproduce the Retina display — DaniP, Dec 18 '13 at 16:08
Do you not need to specify double width/height dimensions if you are loading images that are double the size for retina ? — grimmus, Dec 18 '13 at 16:18
You can use Firefox to test retina media queries Go to "about:config" Find "layout.css.devPixelsPerPx Change it to your desired ratio (1 for normal, 2 for retina, etc. -1 seems to be Default.) and refresh. More info here - http://stackoverflow.com/questions/15551287/how-to-test-a-website-for-retina-on-windows-without-an-actual-retina-display — grimmus, Dec 18 '13 at 16:20
@grimmus Specifying double the size makes the images occupy double the space on the page, so they still appear pixellated but are double the size. — benwad, Dec 18 '13 at 16:25

score 0 · Answer 1 · answered Dec 18 '13 at 16:56

I found a solution: instead of defining the new offsets for each element like so:

background-position: -226px 0px;

We just need to 'pretend' that the image is the same size it used to be. So we set the background-size attribute to the size of the smaller sprite sheet:

background-size: 204px 238px;

...and that seems to work!

Switching CSS sprite sheets for retina displays: images come out twice as large

1 Answers1