Comments on: Using SVG in backgrounds with PNG fallback

By: Peter

Peter — Tue, 21 Sep 2010 21:41:58 +0000

I don’t quite get what you mean, Bryan; it’s showing the two side-by-side? Or one appears under the other? I’m looking at it in Chrome now and it seems fine.

By: Bryan Elliott

Bryan Elliott — Tue, 21 Sep 2010 18:51:28 +0000

Chrome breaks it. It causes both the SVG and the PNG to display simultaneously.

By: Peter

Peter — Mon, 09 Aug 2010 09:11:13 +0000

You’re right, Matthias, it’s certainly not a method without any drawbacks; I’d hesitate to use it on a production site because it has so many limitations.

By: Matthias

Matthias — Sun, 08 Aug 2010 23:29:12 +0000

The drawback of this method is obviously that if the browser supports the CSS 3 background-image property, the browser will fetch both images and lay them over each other (the SVG will be on the first layer and should cover the PNG, so that it becomes invisible). This also means that without optimisation (that is browser detects that the SVG covers the entire area and ignores all other layers) the browser will have to scale both images.

By: Peter

Peter — Thu, 01 Jul 2010 18:33:47 +0000

Hmm, it worked in IE8 when I last checked; I’ll take another look later and confirm. Thanks for the feedback.

Update: You were right; IE was not falling back as expected. I’ve updated the technique so it works as expected now. Thanks a lot for spotting this.

By: BerggreekDK

BerggreekDK — Thu, 01 Jul 2010 17:21:05 +0000

Just checked this on Windows 7, Internet Explorer 8… all squares blank. And the background on Firefox 3.6.6 does not scale to browser width, so the Safari 5.x and Chrome 5.x works. Guess this trick is obsolete now.

By: Peter

Peter — Tue, 15 Jun 2010 21:29:02 +0000

It's a good idea, Martin, but it doesn't work. The fallback to the previous background-image declaration would only happen if the browser didn't understand the multiple syntax. However, some browsers - notably Firefox - do understand the syntax, so the fallback doesn't occur, but can't locate the file for the background-image, so treat it as none.

By: Martin

Martin — Tue, 15 Jun 2010 18:35:51 +0000

Why can’t you do this:

E {
background-image: url(‘image.png’);
background-image: url(‘image.svg’), url(‘image_that_doesnt_exist.png’);
background-size: 100% 100%;
}