Archived topic
Understanding Page Hero Background image size
3 replies · Started by Martin on February 15, 2020
I'm trying to come up with a size for a page hero background image.
My content width is 1080px and I want the page hero background image to be Full Width but when browser width is about 1100px it would be nice to see the complete background image with a banner size of 1100 px wide, by 200px vertical.
I don't want any text on it, I just want it to scroll up under the menu and logo area.
I understand the settings to make it scroll up nicely (merging) with the menu and header area. And I get that I have to put a blank bit of text in to get the image to display.
But I don't get how to have a basic setting that will show me the whole image without clipping?
Hi there,
the height of Header Element without any content is controlled by the Top / Bottom padding.
By using % units instead of pixels we can make a full width header elements height responsive to the browser viewport width.
Base rule is to calculate the aspect ratio as a % for the original image:
eg. 200px (H) / 1100px (W) * 100 = 18%
Then apply this as the TOTAL top and bottom padding eg. top: 9% bottom: 9%
May need some tweaking.
Thanks! This is great info. I love formulas. Might be nice to have this info in the page hero documentation when it talks about padding! Have a great day!
We'll take a look at that :)
You're welcome
