CSS – retina image switching


Can anyone help with the following please?

I have a css style for a website logo. I’m using the retina.js to switch in an @2x version – as it’s a background image.

A second css file contains the replacement code for the @2x image.

I’m also switching the logo depending on screen size using ‘@media only screen’ to do this.

The problem I seem to have is that the retina switching will only switch to one predefined image.

So for example the standard images is “logo-400px.png” and retina.js will swap in logo-400px@2x.png”

However, if the screen width is 414px wide the css @media query swaps in “logo-200px.png” but if it’s a retina screen retina.js still swaps in “logo-400px@2x.png”

There doesn’t appear to be a way to swap in an @2x background images for a css style with multiple background images (depending on screen size).

Any help much appreciated.


position: absolute; 
top: 30%;
width: 100%;
background-image: url(../images/logos/logo-400px.png);
background-repeat: no-repeat;
background-position-x: 50%;
z-index: 7000; 

@media only screen and (orientation:portrait) and (min-width: 300px) and (max-width: 414px) { .LogoIcon{ top: 20%; background-image: url(../images/logos/logo-200px.png); min-height:278px;  } }

retina css

.LogoIcon { background-image: url(../images/logos/wrd-logo-400px@2x.png); background-size: 400px 269px; }


You should take a took at the resolution media feature of the @media rule, or the <picture> element.