I’m doing a little demo page that has to consist of three full-page images that will have child stacks overlaid on them – some text, a scroll button, etc.
The only way I’ve figured out how to do this is to have three separate hero banners. Is there a better way to do this?
Hi @dougmon I would use the Sections stack instead.
Thanks @egomade. I did think of that, but it wasn’t quite what I was looking for – I should have been clearer on exactly what I wanted to do.
The reason I was using banners is that I could get an overlay on the image that enable any child text stacks to stand out without having to set a background color – without this ability, I have to make compromises in how it should look; and I am too stubborn to make those compromises.
So… I can’t figure out how to get a translucent overlay when the section background is an image; there may be a way, but I’m not experienced enough with the tools to figure it out. But if I can’t get an overlay on the image, some of the text
Another feature of the banner that I liked is the locked image – if you use a ScrollTo to the next banner with the images locked, you get a nice “garage door” effect. Not totally necessary, but it makes the transition between screens look really smooth. Again there may be a way to do this with sections, but I can’t figure it out.
So you can see that:
- I wasn’t explaining clearly why I wanted to use the banners; my apologies for that
- I have some wants that I can’t see how to get outside of a banner.
Thanks for the advice, though. I always appreciate any pointers.
Not sure I’m on the right track, but what about a reduced opacity colour background to, say, a paragraph stack, with some padding to look like the para was on an overlay. Same with an image.
@Phloque, I think you may be on to something. You’ve started me thinking in the direction of margins with a background image and then putting a container over that for the overlay…could work. Just have to figure out how to constrain all this to the viewport size.
Thanks for kickstarting my brain…