Dean Elliott Dean Elliott - 3 days ago 7
CSS Question

Retina displays, high-res background images

This might sound like a silly question.

If I use this CSS snippet for regular displays (Where

box-bg.png
is 200px by 200px);

.box{
background:url('images/box-bg.png') no-repeat top left;
width:200px;
height:200px
}


and if I use a media query like this to target retina displays (With the @2x image being the high-res version);

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

.box{background:url('images/box-bg@2x.png') no-repeat top left;}
}


Do I need to double the size of the
.box
div to 400px by 400px to match the new high res background image?

Answer

No, but you do need to set the background-size property to match the original dimensions:

@media (-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 

    .box{
        background:url('images/box-bg@2x.png') no-repeat top left;
        background-size: 200px 200px;
    }
}

EDIT

To add a little more to this answer, here is the retina detection query I tend to use:

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 

}

- Source

NB. This min--moz-device-pixel-ratio: is not a typo. It is a well documented bug in certain versions of Firefox and should be written like this in order to support older versions (prior to Firefox 16). - Source


As @LiamNewmarch mentioned in the comments below, you can include the background-size in your shorthand background declaration like so:

.box{
    background:url('images/box-bg@2x.png') no-repeat top left / 200px 200px;
}

However, I personally would not advise using the shorthand form as it is not supported in iOS <= 6 or Android making it unreliable in most situations.

Comments