CODEWITHSUNDEEP
cssbackground-imageretina-displayipad-3
user930514
user930514

Reputation: 927

Retina display on iPad3 set background image using css

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;                   
    }

}

Upvotes: 0

Views: 686

Answers (2)

James Holderness
James Holderness

Reputation: 23001

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.

Upvotes: 0

Jacob van Lingen
Jacob van Lingen

Reputation: 9537

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/

Upvotes: 1

Related Questions