Cannot place elements over symbols

Design help General
1

Hi,

I have created a symbol which I use on all pages - it’s like a background.
The idea being that I will then place content over the background on each page.
BUT i cannot get this to work - HELP!!

https://preview.webflow.com/preview/petes-dandy-site?utm_medium=preview_link&utm_source=designer&utm_content=petes-dandy-site&preview=1eab40f57e714b526ad693d708ddf048&pageId=627a5a3ad098a8adee610b21&workflow=preview

What am I doing wrong?

Please help!
Pete

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hey, Pete! This appears to be an issue with z-index. Your Background symbol is inside main_wrap which has a z-index of 3, however you also have another main_wrap outside of that symbol that contains your heading and where I assume you will place the rest of your site content. So, Webflow doesn’t really know how to stack these since they both have the same z-index. You’ll want to adjust this so that your background layer has a z-index of -1, and the rest will fall above it by default. That should take care of it. Let me know if I can clarify anything.

3

Thanks Chris, I actually managed to work it out after I had posted and was just about to update the post. It seems to be working now.

4

@ColemanChrisB - Sorry but this is not working for me - I thought it was but now each time I try to add content, either it does not appear or the effect that I want to use doesn’t work.

https://preview.webflow.com/preview/petes-dandy-site?utm_medium=preview_link&utm_source=designer&utm_content=petes-dandy-site&preview=1eab40f57e714b526ad693d708ddf048&workflow=preview

I have cloned the page from Barba JS (Page Transition) - Webflow and then added my own elements.

I think that if I could just get the content part to work then the site could be on it’s way to being finished but each time I try to edit it, I just get another problem.

Really appreciate any suggestions/help…

Thanks
Pete