Streaming live at 10am (PST)

Fixed backgrounds; Fixed Div


#1

Hello. I am working on a website for my restaurant. I had just a couple of issues that I was hoping someone could help me figure out.

Firstly, in my hero section I have a slider in order have it change between 4 different backgrounds. Now, whenever I change the status of the image to “fixed” so that it will stay still when the page scrolls down instead of scrolling with the page, it actually makes the background disappear.

Second, I have a fixed div in the bottem right corner, in which I have a facebook plugin embedded using html embed. I have it fixed and in the position that I want, however it winds up being underneath the rest of the content on my page. I was able to help this in part by dragging it to the last item in the body of my site, rather than the first, so now it is on top of everything except for my hero section. Also for some reason parts of it are actually transparent over certain items or text on my site. I have included the public share link so hopefully somoene can take a look and maybe give me a few pointers on how to solve these relatively simple seeming issues that are driving me nuts. Thanks in advance. :slight_smile:

PUBLIC SHARE LINK: https://preview.webflow.com/preview/tortugas-collegeville?preview=2dae79bea21d38473cb4d969dff54259

URL OF SITE: http://tortugas-collegeville.webflow.io


#2

Issue one:

Check again. You should add the fixed to the image (works fine). Maybe clear cache or add url with this problem:

Issue two:

When you change element to fixed you can set itsZ-index. So change the facebook box to z-index 500 or some high value and thats it. You dont need to change the Tree (DOM) order for this to work.

https://www.w3schools.com/cssref/pr_pos_z-index.asp


#3

Thank you. Z-Index did the trick.


#5

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.