Honzis Novák Honzis Novák - 1 year ago 67
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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download