I really love GeneratePress and plan to recommend it to all my clients. However, I am not a programmer and I’m struggling with the Hero element. I have read all the online documentation on creating Heros, but I think you need a better explanation for how to position the background image and the text on the page. I understand normal padding, but the padding on the hero element is odd. I don’t understand it.
I’m trying to create a full background image with some text, and a sign-up form (script) on top to create a nice-looking landing page. I have 20% bottom padding to show this size of a full-background image. I did this with trial and error…not because I understand it!
Please provide more documentation on Hero padding in the future…and how to position elements on top of a background image.
Header Elements, like any container with a background can be tricky especially when there is content inside the container. And in this instance there is no quick calculation that will eliminate any ‘tweaking’.
Vertical positioning basics:
Top only padding aligns content to bottom of hero.
Bottom only padding aligns content to top of hero.
Equal Top and Bottom padding will center the content.
Background size: Full width hero with NO content.
Calculate the original background images aspect:
Image Height / Image Width * 100.
Example URL hero image: 628px / 1200px * 100 = 52%.
Now edit your heroes padding so the Top padding + Bottom padding = 52%.
This sets the containers height to 52% of the browser viewport, and will always display the full image, no matter the screensize.
Background size: Full width WITH content.
This is where the issue arise. Above we have only the responsive % padding controlling the height of the hero. When content is added we now have to include its fixed height. Which throws the responsive controls out the window. So unless we resort to maths and code there is no simple fix to this. Aside from tweaking.