Search code examples
cssbackground-imagefallback

CSS 'Fallback Images'

So if you have code like this:

background: url('image.png');
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));

Your browser will use the gradient if it is webkit, but if it isn't, it will fallback and use the image. If you are using webkit, the image will just not even be downloaded. So if you had:

background: url('image1.png');
background: url('image2.png');

Would 'image1' be downloaded at all or do the same rules as the 'fallback' image apply?

Solution

  • Chrome (tested on v9.x) will only download the second image. See Developer Tools on this sample page