CSS images and Retina displays

Question

Using Chrome on a Macbook Pro Retina and Chrome on Windows , I'm getting some strange behaviour whilst trying to display images for non-retina and retina displays.

I have a number of square images and the CSS is as follows:

/* NON RETINA */

/* style for all square images so no need to repeat */
.sq-img-small {
  background-size: 239px 239px;
  width:239px;
  height:239px;
  float:left;
  margin:0 0 20px 10px;
}

.sq-img-small.img-small-1 {
  background: url('../images/squares/food1.jpg') no-repeat top left;
}


/* RETINA */
@media 
  (-webkit-min-device-pixel-ratio: 2),(-moz-device-pixel-ratio: 2), (min-resolution: 192dppx) { 

  .sq-img-small.img-small-1 {
    background: url('../images/squares/food1.2x.jpg') no-repeat top left;
  }

My HTML is:

<div class="sq-img-small img-small-1"></div>

The non-retina displays the images perfectly well but the retina images are not displaying as they should. I cannot see the whole image in the div - it appears to have zoomed in on the image so I can only see a fraction.

If I add:

background-size: 239px 239px;
width:239px;
height:239px;

into the retina .sq-img-small.img-small-1 block then it displays fine but I didn't think I would need to do this as it should inherit from earlier right? Or is inheritance affected by the @media block in some way?

=============== UPDATE ==============

After further investigation, it seems that setting the style for all square images and then specifying the path to each image works fine when not inside @media block but doesn't work when I do the same inside one.

Answer 1

Just giving you an example. Try this solution.

/* for low resolution display */

.image {

    background-image: url(/path/to/my/lowreslogo.png);
    background-size: 200px 300px;
    height: 300px;
    width: 200px;

}

/* for high resolution display */

@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
.image {    
    background: url(/path/to/my/highreslogo.png) no-repeat;    
    background-size: 200px 400px;    
/* rest of your styles... */

}
}