How to fix a bug with the disappearance of part of the background?

Question

css

<section>
  <div></div>
</section>

section {
  padding: 20px;
  width: 100%;
}

div {
  width: 100%;
  background-image: url('https://svgshare.com/i/6RG.svg');
  height: 32px;
  background-repeat: no-repeat;
  background-size: cover;
}

Snippet: https://codepen.io/anon/pen/RyRBLQ
Part of the background disappears if you change the property

background position

, then the background disappears on the other side if you specify

background-size: 100% 100%

, the background just stretches to its full width, but does not cover the entire block, how to fix it?
It should be like this:
What could be the problem, I've been racking my brains for the second day.

Answer 1

And if so ?

<section>
  <div>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1"  x="0px" y="0px" viewBox="0 0 1000 32" enable-background="new 0 0 1000 32" xml:space="preserve">
       <line fill="none" stroke="#000000" stroke-miterlimit="10" x1="0" y1="0" x2="484.8" y2="0"/>
       <line fill="none" stroke="#000000" stroke-miterlimit="10" x1="484.8" y1="0" x2="500" y2="32"/>
       <line fill="none" stroke="#000000" stroke-miterlimit="10" x1="500" y1="32" x2="1000" y2="32"/>
    </svg>
  </div>
  
</section>

Answer 2

Your background is stretched. Changes the height of the image. And you have it fixed. Everything that is not included in 32px is hidden.