Honzis Novák Honzis Novák - 4 months ago 10
HTML Question

Perfectly fixed background banner in CSS

I have a banner on my page, that has this settings:

width: 100%;
height: 100px;
background: url(...) no-repeat center center fixed;


But I fight with a combination of locked aspect ratio of background and responsive width and height of background.

When I have a locked aspect ratio of background (delete background size 100 100), it has blank spaces on every side, when window is resized above size of the image.

When I have
background-size: 100% 100%;
, then aspect ratio isn't locked.

When I have
background-size: 100%;
, then aspect ratio is locked, it has 100% width, but it has blank spaces on the top and bottom.

I'm asking you, if you could please teach me a combination of locked aspect ratio and have it without blank spaces. I created a JSFiddle, where I have every example: https://jsfiddle.net/30ycgsg0/

I'm thanksful for every response, have a nice day!

Answer

Use background-size:cover;.

Because the aspect ratio of the element can be different than that of the image, and you don't wan't blank spaces, the image will sometimes be cut off.