This members-only tutorial provides the steps to set up a responsive hero section in Oxygen with text overlaid on top.
We shall use an <img> element vs setting an image as cover background to ensure proportional scaling of the image.
At a smaller breakpoint, the text will be set to appear below the image.
Edit your Page/Template in Oxygen in which you would like to add the responsive image with text overlay.
Add a Section.
Text Color: #ffffff
Tags:
hi sridhar…
I just added this to a page and thought I followed everything – went over it 3 x – but something weird is going on – there’s a transparent grey going beyond the image into the page on desktop and iphone – inspector is showing that its the background in the :before section – Also, when you hover over it, the type and the fill disappears. and I can’t get the headline to center… can you guide me? website is: https://jonbates.com
Thank you!
Hi Barb,
Which section are we talking about on the homepage of that site?
Update – I didn’t give you the page – bt since I’ve tried another – so it is happening on both pages: https://jonbates.com/jon-bates/ and https://jonbates.com/about-the-jon-bates-band/
Same mistake as the other user did at https://www.facebook.com/groups/1626639680763454/permalink/1950879381672814/?comment_id=1953027451458007&reply_comment_id=1955520441208708&comment_tracking=%7B%22tn%22%3A%22R5%22%7D.
🙂
You should set position of the Section to relative.
Leave a Reply