angular-retina.js and css backgground image

Question

I started to use (retina.js) to load an alternative image for retina displays.

<img ng-src="/path/to/image.png" width="100" height="100">

Which works with no problem.

So I started to change all my static images with this.

But I have some of them loaded as background image in my CSS:

.logo {
  display: inline-block;
  width: 60px;
  height: 25px;
  background: url(../img/logo-footer.png) no-repeat;
}

<li class="logo">
...

How can I change this to load an image with ng-src/retina.js?

Answer 1

You can use media queries in css

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
}

Answer 2

Have a look at the documentation for retina.js on GitHub. Scroll down to the section that describes SASS, SCSS and LESS. Below those you'll see how the CSS is rendered. You didn't mention whether or not you're using any of the preprocessors, but in case you are, I am quoting that site below:

SCSS

#item {
  @include retina('/images/my_image.png', 3, cover, center center no-repeat);
}

Sass

#item
  +retina('/images/my_image.png', 3, cover, center center no-repeat)

Less

#item {
  .retina('/images/my_image.png', 3, cover, center center no-repeat);
}

Stylus

#item
  retina('/images/my_image.png', 3, cover, center center no-repeat)

Regardless of the dialect, the output is effectively the same:

#item {
  background: url("/images/my_image.png") center center no-repeat;
  background-size: cover;
}

@media all and (-webkit-min-device-pixel-ratio: 1.5),
       all and (-o-min-device-pixel-ratio: 3 / 2),
       all and (min--moz-device-pixel-ratio: 1.5),
       all and (min-device-pixel-ratio: 1.5) {
  #item {
    background: url("/images/[email protected]") center center no-repeat;
    background-size: cover;
  }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  #item {
    background: url("/images/[email protected]") center center no-repeat;
    background-size: cover;
  }
}

@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
  #item {
    background: url("/images/[email protected]") center center no-repeat;
    background-size: cover;
  }
}