CODEWITHSUNDEEP
cssmedia-queries
Ioan-Radu Tanasescu
Ioan-Radu Tanasescu

Reputation: 566

Media query for retina sprites

I want to create two sets of sprites, one for normal dpi screens and one for retina dpi screens.

I've actually used gulp.spritesmith to generate the code and cannot figure out why it doesn't work. Both images exist, I can see the generated css looks right, it loads the different image and changes the background size, as it should, but when I view the page on a macbook pro retina, it still loads the regular sprite, not the retina one (the media query does not work).

.compatibility-icon {
  background-image: url(/img/sprites/sprite.png);
  background-position: -117px 0px;
  width: 80px;
  height: 80px;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .compatibility-icon {
    background-image: url(/img/sprites/sprite-2x.png);
    background-size: 197px 160px;
  }
}

Upvotes: 1

Views: 514

Answers (1)

Ioan-Radu Tanasescu
Ioan-Radu Tanasescu

Reputation: 566

This actually works, the problem was a gulp configuration issue.

.compatibility-icon {
  background-image: url(/img/sprites/sprite.png);
  background-position: -117px 0px;
  width: 80px;
  height: 80px;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .compatibility-icon {
    background-image: url(/img/sprites/sprite-2x.png);
    background-size: 197px 160px;
  }
}

Upvotes: 2

Related Questions