Streaming live at 10am (PST)

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


#1

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
http://setetres.st/#inkstarter


#2

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


#3

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


#4

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.


#5

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.


#6

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!!


#7

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