CODEWITHSUNDEEP
htmlcss
DaxHR
DaxHR

Reputation: 683

CSS can't make header image to fit view

I'm having a problem with header image on my website - it's size is 1920 x 410 px.

I wan't whole image to show but somehow, parts of it on all sides get cropped.

This is my CSS:

#banner {
    background: url('img/kontakt-header-novi.jpg');
    background-position: center;
    background-size: cover;
    height: 410px;
}

And HTML:

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

How to fix it?

Upvotes: 0

Views: 711

Answers (2)

RacoonOnMoon
RacoonOnMoon

Reputation: 1586

cover is to display it on full size... contain always shows all of the image

#banner {
    background: url('http://via.placeholder.com/350x150');
    background-position: center;
    background-size: contain;
    height: 410px;
     background-repeat: no-repeat;
}
<div id="banner"></div>

Upvotes: 3

Alexis Wollseifen
Alexis Wollseifen

Reputation: 471

Simply change background-size: cover; to background-size: contain;

-> https://developer.mozilla.org/fr/docs/Web/CSS/background-size

Upvotes: 1

Related Questions