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?

Well, until now I had no response... so the only way to solve my issue was to have them load as normal images, instead of having them as background images. — jenciso, Jan 29 '15 at 17:11

score 0 · Answer 1 · answered Jan 28 '16 at 02:13

0

You can use media queries in css

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

answered Jan 28 '16 at 02:13

gazzwi86

1,019
1
15
35

score 0 · Answer 2 · answered Oct 12 '17 at 17:56

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/my_image@2x.png") center center no-repeat;
    background-size: cover;
  }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  #item {
    background: url("/images/my_image@2x.png") center center no-repeat;
    background-size: cover;
  }
}

@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
  #item {
    background: url("/images/my_image@3x.png") center center no-repeat;
    background-size: cover;
  }
}

angular-retina.js and css backgground image

2 Answers2