Search code examples
cssretina

new to css background tag retina image support on multiple browsers, not showing in ff ie

I’m developing a webpage with Retina image support for the first time,

I’m using

   background: -webkit-image-set( url(images/myimage.png)    1x,
                           url(images/myimage_2x.png) 2x);

I’ve got Safari on Mac working like expected, and also Chrome on Windows works, but with Internet Explorer and Firefox on Windows no images are displayed.

I thought maybe adding background: url(images/myimage.png) like:

 background: -webkit-image-set( url(images/myimage.png)    1x,
                           url(images/myimage_2x.png) 2x);
 background: url(images/myimage.png)

and using that as a fall back would be the right way to do it, while this now get images to show in Internet Explorer and Firefox I then lose my Retina version on Safari (it now only loads the standard resolution image).

If someone could please show me the right way how I provide retina support for Safari on Mac while providing a fall back for IE and FF browsers on Windows etc.

Any help would be great

Solution

  • -webkit- is exclusive to Chrome and Safari (& Opera now). You've to supply vendor specific tags for css to pick up.

    Coming ot your question, as of now image-set property is not available for IE or Firefox. You can see this Caniuse data.