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

Question

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?

I believe you have to nest another elem within the container using 100% — Dr Upvote, Oct 27 '17 at 16:04
Hmm in my live example this does not work either. There must be a problem with certain SVG files? — Blackbam, Oct 27 '17 at 16:05
http://jsfiddle.net/JknDr/123/ - this is working for a me on Chrome. if height is the issue, yeah you may need to find an svg that scales more proportionally. — Dr Upvote, Oct 27 '17 at 16:09

score 20 · Accepted Answer · edited Oct 27 '17 at 16:13

20

Open your .svg file and set

preserveAspectRatio="none"

within the SVG tag.

edited Oct 27 '17 at 16:13

Blackbam

17,496
26
97
150

answered Oct 27 '17 at 16:09

holden

1,721
12
19

1

Found related: https://stackoverflow.com/questions/9334095/background-size100-100-doesnt-work-properly-in-chrome – Blackbam Oct 27 '17 at 16:21
this was driving me crazy. thank you for the solution! – Sam Dec 09 '20 at 20:39

score 0 · Answer 2 · answered Oct 27 '17 at 16:09

As suggested in a comment, wrap the svg container inside another one and give the wrapper the dimensions you need. In this case, I set the wrapper to 100vw width and 100vh height. Change the wrapper dimensions and notice that the svg will follow.

html, body {
  padding:0;
  margin:0;
}

.wrapper {
  width:100vw;
  height:100vh;
}

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

<div class="wrapper">
  <div id="container1" class="container"></div>
</div>

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

2 Answers2