Streaming live at 10am (PST)

How to fit an image 100% to the screen


As the title suggests i want to know how i fit for example an image 100% to the screen.

Thanks in advance.


Hey @DharmaNode

You want the picture to be 100% width or 100% height or both?



I just want the hero image to fit the entire screen like so:

In this case the picture with the leopard seal fits to the entire window.


Here you go set the width to 100vw and height to 100vh

Hope this helps



If i set the width and the height of the entire section to 100% it just dissapears. I had already tried that but it wont work.


Can you please provide me a read only link here is how: :smile:


This is just a test site:

But it's not the project that's wrong. It's either how i interpret your instructions or your instructions in general :smile:


Hey @DharmaNode

If you are going to use percentages for the height you will need to add 100% height to the body element. Or you can do what @Ahmadz839 suggested and use 100vw for the width and 100vh for the height on the image.


Here you go @DharmaNode: :smile:



Thanks so much!

Just for my knowledge, what does vw and vh stand for? I didn't even know they existed :grinning:


It means Viewport Height and Viewport Width :smile:

If you want to learn more about units check this out:



Thanks for the help, i just didn't know what vw and vh was haha.


Aha! Thanks for the quick response.


Glad i could help :smile:


closed #15

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