Geek Answers Handbook

SVG as CSS Background

I am trying to get a simple SVG rectangle to work as a background in IE9 or FF4, and none of them work for me. Here is my code:

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <div style="height:99px;background-image: url('bar.svg')"></div> <iframe src="bar.svg" height="99px"></iframe> </body> </html>

The IFrame shows the graphics, but the div is not. Any ideas I might be wrong in?

I found a working example here : But I can't get myself to work :( This drove me crazy.

Thanks for any help.

+6
html css css3 svg
source share
4 answers

Thank you all for your help. Actually, it was a problem with the web server where the wrong MIME type for SVG was launched, and this caused browsers to not display correctly.

Here is what fixed it for me.

I first switched from the built-in web server of VS 2010 to IIS Express. Then in my web config I added:

 <system.webServer> <staticContent> <mimeMap fileExtension=".svg" mimeType="image/svg+xml" /> </staticContent> </system.webServer>

Now everything is working correctly.

+8
source share

I had the same problem in Joomla! 2.5 runs on Godaddy Linux server.

After intensive research, I found out how I fixed the problem:

Go to the root directory of your Joomla installation and find the .htaccess file (or htaccess.txt, if not already configured)

Now add these lines to the file:

 AddType image/svg+xml svg AddType image/svg+xml svgz

Rest, use the standard CSS and HTML properties to render your SVG file.

+3
source share

Does this jsfiddle work for you?

http://jsfiddle.net/B3mnk/embedded/result/

fwiw, I added the background size to make it "large".

+1
source share

More articles:


All Articles