homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Inline svg background image

5+ Year Member

Msg#: 4455490 posted 5:35 am on May 20, 2012 (gmt 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">



WebmasterWorld Senior Member 5+ Year Member

Msg#: 4455490 posted 3:27 pm on Jun 8, 2012 (gmt 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 %.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved