Hey @micahryanhtml, @Mads_Egevang, didn’t mean to jump in, but if you want the image to scale responsively you’ll need to do this, because a background image won’t move centered with the browser on scale. Then you can reduce text using VW real easy. I had this happen earlier. Here’s a neat fix for you guys to store in your toolbox
#1 - Section
Flex: Justify Center, Align Center
Overflow: Hidden
Relative
#2 - Div Block:
Block
Absolute
Typography: Center
Insert the two text components
#3 - Add Image:
Must be really large, bigger the the section I.e., 2900 x 2000
No styles added
#4 - Text Scale:
The text will stay centered, the Image will scale down. To have text scale, add “VW” in typography text size to each device view, incrementing up each view. It’s personal preference. Adjust - Text Size & Line Height. Percentages could be used, but I prefer this.
Desktop: Heading 3 & 8, Paragraph 1 & 3
Tablet: Heading 5 & 8, Paragraph 2 & 2
Mobile Landscape: Heading 5 & 8, Paragraph 2 & 2
Mobile Portrait: Heading 7 & 8, Paragraph 2 & 1
If you want the text more towards the top, it takes some tweaking but only adjust on the Text Wrapper Div, not the Section. Take the section Flex to Align Top, instead of Align Center. Use inner padding on the text wrapper, adjust for each device view.
Now you’ll have a beutiful high resolution header image with clean centered text on top. Just wanted to share.
See ya.