Archived topic
Header same height of background image
3 replies · Started by Daniele on January 12, 2021
Hello,
I set a background image for my homepage header.
What I would like to do is to show always the full image, without cropping, so I set background-size: contain;
Now I would like the header height to be the same of the background image, regardless the screen of the device (because from mobile and tablet I got some white space below).
How can I achieve that?
actually I'm using:
.homepage-hero {
min-height: calc(100vh - 200px);
}
to set the width of the container
thanks
Hi there,
try this instead:
1. Set the background to cover.
2. Set the top padding to 56% ( not pixels )
3. Remove the CSS for the min-height.
The 56% is equal to the aspect ratio of your original image ie. 1440(H) / 2560(w) * 100 = 56.
You may need to reduce it a little as the button inside the content also increases the height.
Thanks,
that's clever!
Glad to be of help
