Does anyone know how to create a fullscreen hero image background, that scales with the size of the screen?

[Bobby_Sha]

This is the effect I am trying to achieve. I don’t need to add a video background now, eventually but not now.

I’d also love to know what this is exactly called.

Thanks everyone in advance

Sete Três

[vlogic (Robert Henry)]

Load an image as a background fill for a div or section and set the fill attribute set to cover.

[bartekkustra (Bartosz Kustra)]

Within body just put a new section, give it a class and in height set it to 1vh by typing it inside a box

[Bobby_Sha]

Hi Guys,

thanks so much for the help! I really appreciate it guys, this community has the best people!

Logic - I couldn’t get the hero image to work that way, I may have not done it correct or missed a step.

Bartekkustra - It worked! However I had to change the size to 100vh, 1vh wasn’t showing the image.

[Reply (Clarence)]

Hey @Bobby_Sha

If you want to take it further, you can take a look over here.
In your original post, your example link had a page with scroll hijacking – that is what this is.

Was inspired by @EvanJones post and did a minor modification to his code.

Hope someone might find this useful too, shall make this cloneable.

[Bobby_Sha]

Hi Reply,

Thanks so much - that is an awesome effect, I’ve always wanted to know how to create. I will definitely recreate that effect “http://screenfull.webflow.io/” in another site I am building.

Again, I really appreciate it!!