CODEWITHSUNDEEP
cssinternet-explorersvgcross-browser
emersonthis
emersonthis

Reputation: 33368

Can you make svg images display as backgrounds... even in Internet Explorer?

I'm using SVG images as background images. My CSS looks like this:

background:url('image.svg');

The problem is that they don't appear on IE8 or earlier.

Is there any way to make this work? Or perhaps specify a fallback only for IE? (I don't want to replace them with gifs for other browsers.)

Live example: HERE

Upvotes: 3

Views: 6351

Answers (2)

dugokontov
dugokontov

Reputation: 4612

I had the same problem and used this solution. For this to work you need to have a svg and png copy of image. Than write css like this:

.twitter-logo {
  width: 200px;
  height: 200px;
  background: url(http://cl.ly/D4xT/twitter_newbird_blue.png) no-repeat center center;
  background: rgba(0,0,0,0) url(http://cl.ly/D4o5/twitter_newbird_blue.svg) no-repeat center center;
}

The trick is that IE8 doesn't support rgba, and because of that IE8 ignores second background definition.

According to svg support in other browsers, you will still have issue with Android Browser 2.3- and Firefox 3.6 because they support rgba and don't support svg.

Here is jsfiddle example as well.

Upvotes: 8

robertc
robertc

Reputation: 75707

There's no way I know of to make IE8 use SVG as a background image. You have two real options if IE8 support is important to you:

  1. Provide a PNG fallback for IE8 and other browsers which don't support SVG in a background
  2. Place the SVG in your page instead of the background, position it behind everything else with CSS, then use something like SVG Web to provide support in IE8

Upvotes: 5

Related Questions