Streaming live at 10am (PST)

Super basic layout question


#1

Ok so I have watched tons of videos and get it, mostly. Still I have an issue doing something so basic.

I want a full page BG image. I can make it an image in the “body” but I don’t seem to have scroll abilities (overflow checked to visible, and “scroll checked” - still can’t get it to work. Even tried setting height to 110%).

Alternatively I can use a Div block in the body, and throw an image inside of it. That gives me scroll ability. However, then I seem to have difficulty positioning (layering) other elements on top of it (like other images, or text). If I use sections it pushes the Div down. Then I find myself using crazy margins to place things and I know that is not correct.

I’m fairly certain it’s my hierarchy of containers. I’ve had success with layout until I try and put one large scrollable BG image in “under” all the other stuff. Recommendations to specific videos or suggestions (is there a “z index” component I need?

I mocked up a page “6” to illustrate. I do have the image on the body section but it is toggled off (the blue iceberg image). Oh, and on page 5 I did manage, but I used crazy margins to do it…


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


#2

Your read-only link isn’t working.


#3

Thanks, here it another try…

https://preview.webflow.com/preview/louiss-dynamite-project-1c9918?utm_source=louiss-dynamite-project-1c9918&preview=db68f610d8b7782679ebbc9543347a8c

Not sure if this is page specific or not. ABove was page 6, below page 5

https://preview.webflow.com/preview/louiss-dynamite-project-1c9918?utm_source=louiss-dynamite-project-1c9918&preview=db68f610d8b7782679ebbc9543347a8c

Looks the same to me :). Hopefully one work.


#4

Hey @IPT, the link’s working now.

Is this what you’re trying to do: https://preview.webflow.com/preview/ayames-testpage?utm_source=ayames-testpage&preview=16530df6e3db52ebb53673d4b4329feb

If so, then you need to select the body (all pages) tag and set the bg image in there and set it to fixed.


#5

Thanks, that’s an idea and I just started to play with that. What I was looking for though, was to be able to scroll down that background image (it setup to be pretty long) to get to more content on the lower part of the image.

My issue was the sections pushed each other down and up so I couldn’t get the overlap (as in on page 6). https://preview.webflow.com/preview/louiss-dynamite-project-1c9918?utm_source=louiss-dynamite-project-1c9918&preview=db68f610d8b7782679ebbc9543347a8c

In hindsight after playing with it a few hours I think I need to do this. Put the berg image in a a container, in a section over the body. Set the section, and container to auto/auto for size, with scroll checked. Then I can put DIV’s in that and use relative to float above the iceberg image and still be able to scroll down the long page.

It make sense to me using many sections stacked to get the long page. The challenge was trying to do it with one super long image.


#6

Then I think it would work better if you added it as a bg image of a wrapper, then you should be able to add your sections & content inside without it all being pushed around by the image.

This way you get the long image with sections stacked inside:
https://preview.webflow.com/preview/ayames-testpage?utm_source=ayames-testpage&preview=16530df6e3db52ebb53673d4b4329feb


#7

Okay, cool, thanks. So is that just a DIV with the BG set to the image and a class name assigned as a “wrapper”?


#8

Yes, you can name it whatever you want though.