How to fix the bug with svg background? - html

Question

I have one issue.
My svg backgound isn't full. Part of the background was gone.
It's must look like this
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;
}
<section>
<div></div>
</section>
I tried use background-size: 100% 100%;, some variation of background-position. But it didn't help me.
Code of svg file.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 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>

Answer 1

Some really creative solution, but it works. I used before and after to fill up the empty space with borders. When the image gets too small.
section {
padding: 20px;
width: 100%;
}
div {
position: relative;
width: 100%;
background-image: url('https://svgshare.com/i/6RG.svg');
height: 32px;
background-repeat: no-repeat;
background-size: 100% 100%;
}
div:before{
content: "";
position: absolute;
border-top: 1px solid #8e8e8e;
width: 40%;
left: 0;
top: 0;
}
div:after{
content: "";
position: absolute;
border-bottom: 1px solid #8e8e8e;
width: 40%;
right: 0;
bottom: 0;
}
#media (max-width:937px) {
div:after{
display: none;
}
div:before{
display:none;
}
}
<section>
<div></div>
</section>