CSS background-size: cover; плохо работает

Question

У меня есть #div элемент со следующими стилями CSS:

width: 413px;
height: 140px;
background-image: url("URL-TO-IMAGE");
background-color: #53A7E7;
background-size: cover;
background-position: center;
background-repeat: no-repeat;

И результат следующий:

Как вы можете видеть в левой и нижней части элемента есть две синие линии (цвет соответствует коду #53A7E7).

Если я удаляю стиль background-size: cover; обе линии исчезают, и изображение покрывает всю поверхность элемента.

Есть идеи, как это исправить?

Исходное изображение имеет размеры 1779x683 пикселей, но я хочу, чтобы оно было зафиксировано для любого размера изображения.

#div {
    width: 413px;
    height: 140px;
    background-image: url("https://stackru.com/images/d8f75cd67daa5dcb25a78769ffd674fc95d340c2.png");
    background-color: #53A7E7;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

<div id="div"></div>

Answer 1

Не использовать background-color а также background-size: cover в то же время, потому что изображение будет поверх цвета. Если вам нужен цвет вокруг вашего background-size это крышка, просто добавьте border, background-size: cover работает сердечно. В вашем примере, я полагаю, вам нужно display: inline-block,

#div {
    width: 413px;
    height: 140px;
    background-image: url("https://stackru.com/images/d8f75cd67daa5dcb25a78769ffd674fc95d340c2.png");
    border: 10px solid #53A7E7;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

<div id="div"></div>