how to make image fit the screen at the top of the screen?

sorry if I can't really explain things How can I make a image 100% width and height stretch on the screen when entering a page, regardless of zooming in or out nor device resolution. But, if scrolling down, other elements will be there, the elements wouldn't appear behind the image this is a good example of how I want it https://everybodyfitnessjomo.com/ as you can see, the image is at the top of the screen and regardless of how much you zoom in or out the image remains in the same position and same size. Also, even if entering from another resolution it's still the same. and also, by scrolling down you can see that it's not fixed at the top of the screen anymore.
6 Replies
Rook
Rook16mo ago
They used a background-image on the section at the top of the page with background-size: cover so the image fills the container.
thebigpal
thebigpal16mo ago
thebigpal
thebigpal16mo ago
it doesn't work it only fits the content that it's inside the container
Rook
Rook16mo ago
grow the container's height with height: 100vh
thebigpal
thebigpal16mo ago
thank you very much, now it works
Å Marlon G
Å Marlon G16mo ago
Is it also worth thinking of using dvh to make it less vulnerable for ui changes on mobile devices? https://youtu.be/0-WRRh3ZXhw
Kevin Powell
YouTube
Stop using width 100vw for no good reason
#Shorts Stop using width 100vw for no good reason, most of the time it’s on a block level element that’s already taking up all the available space horizontally anyway, and all it does it open up potential issues #css #frontend #webdev #webdeveloper
Want results from more Discord servers?
Add your server