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://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

Не используйте background-color и background-size: cover одновременно, потому что изображение будет поверх цвета.Если вам нужен цвет вокруг вашей background-size, просто добавьте border.background-size: cover работает в основном.В вашем примере, я полагаю, вам нужно 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>