需要多个“background-size:cover;”？

Question

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.

Answer 1

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.

Answer 2

html and css code

        <img src="firstimgae.jpg">
        <img src="secondimage.jpg">
    </div>```

```.photos {
    background-size: cover;
}```