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
They used a
background-image on the section at the top of the page with background-size: cover so the image fills the container.
it doesn't work
it only fits the content
that it's inside the container
grow the container's height with
height: 100vhthank you very much, now it works
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