Retina displays, high-res background images

Question

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/[email protected]') 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 1

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

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/[email protected]') 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/[email protected]') 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.