使用“background-size : 100% 100%”时，DIV“background-image”没有在整个DIV上拉伸

Question

On my website I am building a custom HSV Color picker . Instead of using Gradients I've decided to opt for a .SVG Gradient image that I will use in my HSV Slider.

I am having a problem with the fitting of that Image into the Background of my DIV.

Here's an example . The Image is fitted perfectly in both Mozilla Firefox and Internet Explorer, but in Edge it looks as if only the "height" is at a "100%", and the "width" is "auto" - Which it is not, at least not in the CSS:

#pvdivsliderhue {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
width: auto;
height: 30px;
border-radius: 15px;
background-image: url('images/pvhue.svg');
background-size: 100% 100%;
background-color: green;
display: flex;
}

How would I go about solving this issue?

Appreciate all the help!

Answer 1

SVG is still buggy in Edge. Therefore, I advise to use old school .png or .jpg images if you don't require a vector image.

Check out the working example:

 /* Demo Styles */ .picker { height: 150px; width: 200px; position: relative; margin: 0 auto; background-color: #e9e9e9; } /* Hue Slider */ #pvdivsliderhue { position: absolute; top: 10px; left: 10px; right: 10px; width: auto; height: 30px; border-radius: 15px; background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Hue_alpha.png/900px-Hue_alpha.png'); background-size: 100% 100%; background-color: white; display: flex; }

 <div class="picker"> <div id="pvdivsliderhue"></div> </div>

Answer 2

Make the margins and padding 0

#pvdivsliderhue {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
width: auto;
height: 30px;
border-radius: 15px;
background-image: url('images/pvhue.svg');
background-size: 100% 100%;
background-color: green;
display: flex;
margin :0;
padding :0
}

Answer 3

Try background-size: cover or background-size: container . I hope it will solve your problem.