Need multiple "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.

If you post your code it will be better to understand you problem. — Vijay, Jul 05 '20 at 16:12
I would have but I kept changing it so much trying to get it to work out that I've basically erased most of it. — James Goff Jr, Jul 05 '20 at 16:21
The whole point of having background size of cover is that you have a single image that you want to cover the entire dimension of the element with. This doesn’t seem to be applicable to your use case. — Terry, Jul 05 '20 at 17:29
How can I go about achieving this type without "background-size: cover; — James Goff Jr, Jul 05 '20 at 17:31

score 0 · Accepted Answer · answered Jul 05 '20 at 16:11

0

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.

answered Jul 05 '20 at 16:11

LiaNalani

50
9

So I just tried it out and it partially works. The layout is working but now the two photos are HUGE. If the background-size is set to cover why is it so big? – James Goff Jr Jul 05 '20 at 17:12
@JamesGoffJr this background property means covering the whole div – LiaNalani Jul 05 '20 at 17:41
@JamesGoffJr you did not mark my answer as the correct one :( – LiaNalani Jul 06 '20 at 16:18

score 0 · Answer 2 · answered Jul 05 '20 at 17:20

0

html and css code

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

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

answered Jul 05 '20 at 17:20

James Goff Jr

13
1

1

Please put your code in your original question. This following section is for answers only, (unless you want to answer your own question). – Geocrafter Jul 05 '20 at 18:10

Need multiple "background-size: cover;"?

2 Answers2