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>
