Single page site - overlay on backgrounds

Foundry Potion Pack
1

I’d like to build a simple, single page site using the Sections stack with a photo as a background for each ‘page’. However, I’d like to have an overlay on each photo so the text layer stands out a bit more. Can’t see how to do this in Sections so is Backdrop from the Potion Pack my best bet to create the photo-with-overlay background?

Thanks

Rob

2

Hey @Rob –

The Sections stack doesn’t have an overlay feature for the background images. You could apply an overlay in an image editing app like Photoshop first.

That said… Personally I would build an anchor based site using Mega Menu and the Anchor stacks instead of using Sections. You’re likely to end up there after working with Sections anyway I think. Sections is for VERY limited amounts of content, which always seems to end up being too limiting for the vast majority of users.

If you need tips of using Mega Menu for such a site, let me know!

3

Thanks.

There’ll be hardly any content. It’s just to create a nicer version of this - www.robbeattie.com

So could I put a Backdrop stack inside a Sections stack and do it that way?

Rob

4

Backdrop will not go full screen. It expands only to the height of its contents. Backdrop would not work for this purpose.

5

OK, thanks. I’ll have to see if I can find another way.

6

Layering a translucent color fill over your image in Photoshop, Pixelmator, etc is a good way if you have access to any image editing software.

7

I’ve got Affinity and Graphic so I might have a go with those. Cheers

Rob

1 Like
8

Rob

I am new to RW but, I can confirm single page site works really well with mega menu and it is very simple using anchors - your can place images or just plain colours as per your demo - I am building a site, not finished; I am using mega menu and margin and paragraph stack

Www.therapywithneleen.com

Can I ask what you have used for you plain contact form on your demo site please?

Jilo

9

Rob

If it’s simple overlaying colour over images, I would be happy to help you with this; I have photoshop and illustrator. You demo site layout look relatively clean and simple to produce in photoshop.

Jilo

10

Thanks for sharing that. The contact form is Doobox’ HTML Contact Form stack - HTML Contact Form Stack

Rob

11

That’s a kind offer but I have Affinity Designer so it’ll be good practise to learn how to do it myself.

Rob