Retina display on iPad3 set background image using css

Question

I tried the following css, but it doesnt help on iPad3. Only one fourth of the image fits on iPad3.What is going wrong?

.titleIcon {
  float: left;
  background: url(/images/sprite.png);
  background-position: 0px 0px;
  width: 16px;
  height: 16px;
}



@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (   min--moz-device-pixel-ratio: 1.5),
only screen and (     -o-min-device-pixel-ratio: 3/2),
only screen and (        min-device-pixel-ratio: 1.5){ 

    .titleIcon{
        float: left;
        background: url(/images/sprite-2x.png) no-repeat 0 0;
        background-position: 0px 0px;                   
    }

}

score 1 · Answer 1 · answered May 03 '13 at 08:40

1

The ipad 3 got a pixelratio of 2, so your media queries don't work yet. Add min-device-pixel-ratio: 2 to your code.

Further reading: http://halgatewood.com/ipad-3-media-query/

answered May 03 '13 at 08:40

Jacob van Lingen

8,989
7
48
78

Maybe you should a a background size? Read this article btw: http://mikepultz.com/2012/03/how-to-make-images-look-good-on-the-ipad-3/ – Jacob van Lingen May 03 '13 at 08:48
i set width and height to 16px . background-size property doesnt work for me even for a normal image in case of desktop browser.Still it doesnt help.The image seems too big to fit – user930514 May 03 '13 at 09:24
Why does the background-size not work? According to W3Schools: "The background-size property is supported in IE9+, Firefox 4+, Opera, Chrome, and Safari 5+.". See: http://www.w3schools.com/cssref/css3_pr_background-size.asp – Jacob van Lingen May 03 '13 at 09:36

score 0 · Answer 2 · answered May 03 '13 at 08:50

Devices with a retina display use a virtual viewport where each CSS pixel is actually made up of two device pixels. If you create a div that is 100x100px, it will look the same size on a retina display as it does on a regular display, even though it's actually 200x200px on the retina display in terms of device pixels.

Usually this is a good thing, but it means your extra high resolution image is going to look just as big on the retina display as it would on a regular display (i.e. too big to fit). You'll need to scale it down to half the size, if you want the whole thing to be visible.

On a regular display, this would mean losing resolution, but because the retina display has two device pixels per CSS pixel, this cancels out and the image is shown exactly as intended.

Retina display on iPad3 set background image using css

2 Answers2