CSS background-size: cover; works badly - html

Question

I have a #div element with the following CSS styles:
width: 413px;
height: 140px;
background-image: url("URL-TO-IMAGE");
background-color: #53A7E7;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
And the result is the following:
As you can see in the left and bottom part of the element there are two blue lines (the color corresponds to the code #53A7E7).
If I delete the style background-size: cover; both lines disappear and the image covers the entire surface of the element.
Any idea how to fix this?
The original image has the dimensions 1779x683 pixels, but I want it to be fixed for any image size.
#div {
width: 413px;
height: 140px;
background-image: url("https://i.stack.imgur.com/SvWWN.png");
background-color: #53A7E7;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
<div id="div"></div>

Answer 1

Don't use background-color and background-size: cover at the same time because the image will be on top of the color. If you need a color around your background-size that is cover, just add border. The background-size: cover is working corectly. In your example I suppose you need display: inline-block.
#div {
width: 413px;
height: 140px;
background-image: url("https://i.stack.imgur.com/SvWWN.png");
border: 10px solid #53A7E7;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
<div id="div"></div>