homepage Welcome to WebmasterWorld Guest from 54.196.159.11
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
ocon




msg:4455492
 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?

<html>
<head>
...
<style>
#bg{position:absolute;top:0;left:0;height:150px;width:450px;z-index:-1}
</style>
</head>

<body>
<p>...</p>
<div>...</div>
<svg id="bg">
...
</svg>
</body>
</html>

 

alt131




msg:4462974
 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