htmlcsscoverbackground-size

Need multiple "background-size: cover;"?


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.


Solution

  • 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.