Search code examples
htmlcsssvgbackground-imagestretch

Why does background-size:100% 100%; not work on this SVG?

Look at the example:

.container {
   background-image:url("http://svgshare.com/i/3cM.svg");
   background-position:center center;
   background-repeat:no-repeat;
   width:400px;
   height:200px;
   background-color:#eef;
   border-bottom:1px solid #000;
   background-size:100% 100%;
}
<div id="container1" class="container"></div>

Related question: Stretch a background image (SVG) to 100% width and 100% height?

Solution

  • Open your .svg file and set

    preserveAspectRatio="none"

    within the SVG tag.