Dean Elliott Dean Elliott - 1 year ago 83
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

is 200px by 200px);

background:url('images/box-bg.png') no-repeat top left;

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
div to 400px by 400px to match the new high res background image?

Answer Source

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) { 

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


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

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:

    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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download