Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Inline svg background image

5:35 am on May 20, 2012 (gmt 0)

Full Member

5+ Year Member Top Contributors Of The Month

joined:Sept 30, 2009
votes: 0

I have an inline svg image in my webpage that I use as a background image. It is important to me to reduce the number of separate files on this webpage so I really want to keep the image inline.

My main problem is I have a fluid design, but if the browser is skinnier than this image than it gives my page an undesired horizontal overflow.

Is there a way to create an inline svg image as an actual background image and not just an image with a negative z-index that still impacts my page dimensions like a normal image does?


<svg id="bg">
3:27 pm on June 8, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 0

Hi ocon, this wasn't forgotten so much as running into a few challenges. The short story is that I don't svg, but after some digging found an example of exactly what I think you want, tested it, decided it could be cleaned up a bit, lost the tidied code ... and haven't been able to find the blog from which I obtained the original.

The short answer is that it does seem to be possible to create an svg inline then call it using
background-image: url(#myid). Quite neat really, although as I'm sure you are aware, cross-browser mileage isn't very high. I'll keep looking for the working example I originally found, but maybe that gives you something to go on with.

My other thought was to consider the cause of the problem you are trying to solve. It will depend on how the image is coded, but overflow:hidden may help, or setting the dimensions in %.