So right up front, I’m a nube. The only reason I can tie my shoes is muscle memory. That said…
I’m trying to get my hero (text + large asset + background) to look and behave like:
I’m trying to set up a hero section with these properties:
- background image is centered, full width and doesn’t move when browser is resized
- hero content consists of two basic sections: text and a large pic
I can get the background to stick, but as soon as I start trying to add the two sections the background image starts scale with the browser.
Here is what I’ve tried.
- I added two sections, each with width=50% and float left
- In the lefthand section, I added two sections to it. One with width=500px, the other width=100%
- In the righthand section, I added an image to it and set the height to 950.
I am very new to display setting=flex. Also, I’m not too clear on substituting divs to ‘recreate’ your native column element to get past the width constraints.
Ideally, my large pic would behave somewhat similar to the stripe example in terms of filling up right half of the page and slightly hanging off the page until ‘some specified min size’ before it slides under the text to the left of it.
Would you help a brother out, please!
Thanks in advance,