[Resolved] Understanding Page Hero Background image size

Home Forums Support Understanding Page Hero Background image size

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1166611
    Martin

    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?

    #1166849
    David
    Staff
    Customer Support

    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.

    #1168220
    Martin

    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!

    #1168579
    David
    Staff
    Customer Support

    We’ll take a look at that 🙂
    You’re welcome

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.