Create sections with sticky background images

Design help General
1

I’m having trouble with something that looks deceptively simple: a few sections with full-screen sticky background images (using responsive image element & not background-image) with text on top.

As you finish scrolling through one section and its background image, you move into a new section with its own different background image. I’m aiming for no overlapping images: as you scroll, the next section pushes the previous section up.

I’ve been playing with position, margins, and top/left/right/bottom for about an hour, but I keep ending up with large blank spots or cut off text. Here’s where I am so far:

The current layout:
Wrapper 1 (relative)
→ bg-image (sticky; height: 100vh)
→ Text of varied length

Wrapper 2 (relative)
→ bg-image (sticky; height: 100vh)
→ Text of varied length

Problem with the current layout: there is a 100vh blank spot above the text, so upon opening the page, you see no text until you scroll. I assume this is because sticky first is relative and thus, it’s taking up its full 100vh space.

Workaround 1:
Wrapper 1 (relative, top: -100vh)
→ bg-image (sticky; height: 100vh)
→ Text of varied length

Wrapper 2 (relative, top: -100vh)
→ bg-image (sticky; height: 100vh)
→ Text of varied length

Problem with workaround 1: the first wrapper is perfect. But, somehow the second wrapper has both a 100vh blank spot above the text and a 100vh white area below the text.

Workaround 2:
Wrapper 1 (relative)
→ bg-image (sticky; height: 100vh)
→ Text of varied length (relative; top: -100vh)

Wrapper 2 (relative)
→ bg-image (sticky; height: 100vh)
→ Text of varied length (relative; top: -100vh)

Problem with workaround 2: there is a 100vh blank spot below the text.

Workaround 3:
Wrapper 1 (relative)
→ bg-image (sticky; height: 100vh)
→ Text of varied length (relative; top: -100vh, margin-bottom: -100vh)

Wrapper 2 (relative)
→ bg-image (sticky; height: 100vh)
→ Text of varied length (relative; top: -100vh, margin-bottom: -100vh)

Problem with workaround 3: now the 2nd wrapper just scrolls over the 1st wrapper, instead of pushing the 1st wrapper. And somehow I still have a 100vh gap below the text.

If I’m just CSS stupid, please don’t mind sending me a tutorial or or a guide. I seem to be really missing something fundamental here.

Here is my site Read-Only: Webflow Designer Link
Here is my site live on the web: Published Website

2

Video below of the current layout. How can I remove the blank spots above Section 1 and Section 2, without introducing more blank areas somewhere else?

That is, the sticky container (wrapper) has the same height as the text only, without adding extra height above the text.

https://streamable.com/mbotv

3

Eghad, I think I figured it out. I’m almost too embarrassed to admit it.

Use a margin-bottom -100vh on the image.

EDIT 1:
No, unfortunately that causes the image overlap again. Hmm. I’ll edit this post with further attempts, to avoid re-bumping this topic needlessly.

EDIT 2:

I’m not sure what I was doing wrong earlier, but Workaround 2 was the solution! I may have not applied something properly, perhaps? I compared my backups and I don’t see a difference. Maybe some fat fingers here, too, haha.

4

Hi @TG2,

Instead of making the main wrappers sticky, just move the whole block down 300px, with Opacity: 0 on initial state.

Then when scrolling down they slide up and Opacity: 100%. They won’t move out of place that way.

5

Ah, that’s a neat tip. Thank you for sharing it.

I ended up using workaround 2, but that’s a nice subtle effect.