Archived topic
Text block inside page hero
3 replies · Started by mkjj on March 2, 2022
This is not really a support question. I do understand, if this is beyond the scope of this forum. However, it is probably a very common issue that many users might have.
I usually use a header element for a full-width header image and set a padding-bottom of x% to make the image resize correctly. For example, if I have a 1920x500px image, I set the padding-bottom to 26%. This works pretty good, if text is part of the image. What would be the best approach for overlay text like so:
<div class="page-hero-slogan-wrapper">
<p class="page-hero-line-1">Text</p>
<p class="page-hero-line-2">Text</p>
<p class="page-hero-line-3">Text</p>
<p class="page-hero-line-4">Text</p>
<p class="page-hero-line-5">Text</p>
</div>A padding would make the header area too large. Without the padding, the image will not scale proportionally (which is not a problem for this specific site). At best, the background image would not be cropped, while I have full control over the text block. Is this even possible?
Thank you, Mike
Hi there,
as the hero is full width then you can take advantage of viewport widths and aspect ratios.
1. Calculate the aspect ratio of the original image eg.
w: 550px / h: 1920px * 100 = 29%
2. Give the Page Hero an Element Class eg. home-hero
3. Add this CSS:
.home-hero {
min-height: 29vw;
}This will make sure the Hero keeps the same aspect ratio as the original image. If of course the content within the hero forces it to be taller the the min-height will allow that change.
Wow, that's amazing. Thank you, David! Exactly what I was looking for. Works like a charm!
Mike
Glad to be of help
