I am trying to build a project for fun and I want to create a page that has multiple images when you scroll down. I am using HTML and CSS.
I want the layout to be similar to background-size: cover; but apparently you can only use 1 per page?
Here is a website with a similar layout I am trying to achieve sample website Minus all the transitions. I am just trying to achieve the image layout of this website.
I can't figure out how to size my images to be similar to the cover layout but I want the page to be able to scroll down not one stacked on top of the other.
I have tried using background-image: url("sample.jpg"), url("sample2.jpg");
but they stack the images on top of each other instead of make the page scrollable.
I also tried using multiple divs each with their own background-size: cover;
but only the first photo shows up?
I want a vertical scrolling page full of "cover" images if that makes sense? I don't know how else to explain it, i've spent hours googling it and I can't find anything?
I am still pretty new to web development so I hope I explained everything ok. If you need more information just ask me.
You can put <img> tag one by another and give them all the same classname. And then give
background-size: cover; property to the class.