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?
Best Answer
No, but you do need to set the
background-size
property to match the original dimensions:EDIT
To add a little more to this answer, here is the retina detection query I tend to use:
- 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). - SourceAs @LiamNewmarch mentioned in the comments below, you can include the
background-size
in your shorthandbackground
declaration like so: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.