Streaming live at 10am (PST)

Picture Overlay

Hey Community!

I’ve started working with Webflow for the past few days. So I’m just starting to know the basics, that is why I’m sorry if this question maybe is ridiculously obvious.

So I’ve constructed a portfolio site in Figma that looks like this.


*it goes on, but this is the part I’m working on now.

My hero section seems to be working, except it doesn’t. I’ve built it in a way that isn’t responsive. Besides that, it feels wacky.

The general question I’m asking is what is the best way to make a picture overlay an element.

As you see I want to use the same technique (at least I think it is the same) to overlay a MacBook over the content block. But also to overlay the shapes in the gradient bar so I can animate them based on page scroll. All of this in a way that keeps the site responsive.

I’ve looked up some tutorials on the positioning of elements. They just don’t tell me what I need to know. So also if you know a place where I could learn this please let me know!

I don’t know if it offers any context but I also added a sketch.


Here is my site Read-Only:
https://preview.webflow.com/preview/jbport?utm_medium=preview_link&utm_source=designer&utm_content=jbport&preview=bf7a2a33ab2c485582b34124f80b34ac&mode=preview