Height with 100vh problem to smaller screens

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.

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?


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.

Hi there Chronzam,

this is how I would approach your problem…




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

        No problem, you’re very welcome. :winky:

1 Like

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