CODEWITHSUNDEEP
htmlcsscoverbackground-size
Gabri
Gabri

Reputation: 121

CSS background-size: cover; works badly

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:

banner

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.sstatic.net/SvWWN.png");
    background-color: #53A7E7;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
<div id="div"></div>

Upvotes: 4

Views: 4844

Answers (1)

Carabus Manuel
Carabus Manuel

Reputation: 111

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.sstatic.net/SvWWN.png");
    border: 10px solid #53A7E7;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
<div id="div"></div>

Upvotes: 5

Related Questions