CSS Image Overlay Issue

Hi all,

I’m currently building the survey-form project and I’m trying to overlay the background images like the example shows.

The example nests the background images in the body css element in the below fashion:

body::before {
background-image: image_1, image_2;
}

This works fine. The issue is I don’t understand why the before pseudo-element is necessary here. I tried it without the ::before element and it looked like below. The images are not the same size even I set them to cover. Can anyone please explain why ::before is needed here to make this work? What is an alternative without ::before? Thank you in advance.

Pls give the link and explain more