Archived topic
Page hero: How to prevent background image from scaling up?
3 replies · Started by mkjj on May 30, 2022
Hi,
when using a background image in a header element, I usually set a percentage value for padding to keep the aspect ratio of the image. For example, for a 1900x600px image I woul set a padding-bottom of 31%. This works perfectly fine. However, when text is added, the background image scales up to cover the additional area. See this example, please:
https://www.herrenhof.net/der-herrenhof/
This is the original image:
https://www.herrenhof.net/wp-content/uploads/2022/05/herrenhof-header-2022.jpg
How would I position some text inside the page hero without scaling the image up?
Thank you!
Mike
Hi Mike,
There are two approaches we can try.
1. Try adding this CSS in Appearance > Customize > Additional CSS:
.page-hero h1 {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.page-hero {
position: relative;
}On mobile, you’ll need to modify the Font size of the Headline Block though.
Example: https://share.getcloudapp.com/o0uGpvWP
2. Try to reduce the paddings you have set to something like 9% top and bottom padding or whichever works best.
Kindly let us know how it goes.
Hi Fernando,
thank you very much. That was excellent start. I had to tweak it a little bit to make it better work on mobile devices. But that's ok, since the background image is scaled anyway on mobile. This is the CSS I finally used:
@media screen and (min-width: 1280px) {
.inside-page-hero {
position: absolute;
top: 50%;
left: 25%;
transform: translateY(-50%);
}
}As always, with a support team like you having problems is really a pleasure! :-)
Mike
You’re welcome Mike! It's also a pleasure to be helping as well! :)
