Height with 100vh problem to smaller screens

[Chronzam]

It’s okay when it is full screened but when I make the screen smaller, the overlay still following the 100vh, which is expected. But I want it to follow the background-image’s size.

Here is the pen.

[m_hutley]

i’m confused.

You say ‘I want it to follow the background-image’s size’. you set the background image to an absolutely positioned, z-index -1’d, 100% background size. At that point, how is your viewport height different from your background image size?

[Chronzam]

Fullscreen:

Smaller screens:

When the screen is smaller, the overlay is still taking up the whole viewport height. I want it to only follow the actual image behind it.

[coothead]

Hi there Chronzam,

this is how I would approach your problem…

https://codepen.io/coothead/full/oNgYJGN

coothead

[Chronzam]

Ohh so it takes up the whole screen even for smaller screens. I didn’t know that, I’m sorry.
Thanks mr. Coot.

[coothead]

 
 
        No problem, you’re very welcome.
 
 
        coothead