Home/ Questions/Q 8684305
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T22:16:23+00:00

I’m using webkit-image-set to make my images look all nice and pretty for users

  • 0

I’m using webkit-image-set to make my images look all nice and pretty for users using a Retina Display.

Since this CSS selector doesn’t work on an img tag, I have some HTML and CSS that looks like this (as exhibited in Apple’s WWDC 2012 session):

<div id="iconImage">
</div>

div#iconImage {
width:152px;
height:152px;
background-image: -webkit-image-set(url(WebsiteIcon.png) 1x, url(WebsiteIcon@2x.png) 2x);
background-size: 152px 152px;
margin-left:auto;
margin-right:auto;
}

Looks great on my Retina MacBook Pro! Of course, not when I’m using Firefox: it’s just a blank spot, as I’d expect. I’m sure it doesn’t show anything at all when viewed in IE either. Nor is it very accessible.

So, what can I add to the above code to make:

  1. An image (probably the low resolution version) display in
  2. Maybe some kind of text or alt text or
    something so that it’s a bit more accessible to impaired visitors.
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can’t do alt text for CSS backgrounds (not least because backgrounds should not be used for semantically meaningful images), but doing the fallback background is easy:

    background-image: url(whatever);
background-image: -webkit-image-set(url(WebsiteIcon.png) 1x, url(WebsiteIcon@2x.png) 2x);

    non-WebKit UAs will ignore the second declaration, while WebKit will ignore the first because the second overrides it.

    • 0