CODEWITHSUNDEEP
css
Domas
Domas

Reputation: 1133

background image does not fill the full div size

Here is the css being applied to the div:

#header{
    background-size: 100%;
    background: url('../img/header.png');
    width: 100%;
    height: 200px;
    border-bottom: 10px solid #b2d234;
}

as you can see in the picture picture, the bottom border fits the whole width, but the background image does not fill neither the full width nor the height, even though there is no padding or margins applied.

Any guidance is much appreciated.

Update:

I have zoomed out and so the problem is easily seen. The problem is that the background image is being repeated and there are small spaces between each repetition. I have tried no-repeat option, but then i get the background only once and it does not fill the whole screen.

Please, take a look at the picture:

enter image description here

Upvotes: 3

Views: 6789

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 240868

Use:

background-size: cover;

Updated CSS.

#header{
    background-size: cover;
    background: url('../img/header.png');
    width: 100%;
    height: 200px;
    border-bottom: 10px solid #b2d234;
}

Upvotes: 4

Related Questions