I have a SVG sprite file with several images. For the testing purposes, I narrowed it down to a single image.
When I declare the image as an instance in the html body with a reference to the image id in the sprite file, the image appears correctly. This is my test for the correctness and usability of the sprite file.
When I declare the same url in the css section as a background image - it fails. When I refer to another svg file (commented out here) which is the image not as a sprite - it works well and produces the result shown in the image. This is my test for the correctness of the css declarations.
What am I missing out here? Why doesn't it work?
I have seen quite a few such examples working in Codepen. Thanks.
I tested both with and without the viewBox declaration in the css. No effect.
Here is how it looks like with the background coming out of the non-sprite svg file.
I omitted the svg sprite file contents, since it works well.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.footer-bg{
position: relative;
background-color: #eaeaea;
}
.footer-bg::before{
position: absolute;
content: "";
top: 0; left: 0;
width: 100%; height: 100%;
/* background: url(http://94.237.96.98/static/media/images/decor/be-lotus-2.svg) no-repeat; */
background: url(http://94.237.96.98/static/media/images/svg/be-decor-sprite_sm.svg#be-lotus-2) no-repeat;
background-size: contain;
background-position: center;
filter: saturate(0%) opacity(25%) drop-shadow(10px 10px 20px #F5D6BF);
-webkit-filter: saturate(0%) opacity(25%) drop-shadow(10px 10px 20px #F5D6BF);
-moz-filter: saturate(0%) opacity(25%) drop-shadow(10px 10px 20px #F5D6BF);
}
</style>
</head>
<body>
<svg class="sprite" role="img" ><use xlink:href="http://94.237.96.98/static/media/images/svg/be-decor-sprite_sm.svg#be-lotus-2" /></use></svg>
<div class="footer-bg">
<h1>This is my church</h1>
<h2>This is where I heal my hurts</h2>
<h3>For Tonight....</h3>
<h3>God... Is a DJ</h3>
</div>
</body>
</html>This is the SVG file: