How to deal with image CSS?

Question

css

There are five html pages and you need to make sure that each page has different background images. the code in CSS is like this

.background{
    
display: block;
 
 width: 100%;
    
height: 100%;
    
background: url(index.jpg);
    
position: fixed;
    
background-size: cover;
}

And on the pages themselves, here is the code: I tried to clone the CSS code to add to the background if the picture is written here, the index, then I added it turned out like backgroundindex and in the divs on the pages also changed the value, but the effect was zero (((( I also tried to clone this one in CSS line, replacing index with another value, for example, the name of the picture, also the effect is zero Tell me where and what you need, prescribe or replace so that all the pages of the site have a different background?
<div class="index"></div>
background: url(index.jpg);

Answer 1

.page1 {
background: url(index.jpg);
}
.page2 {
background: url(index2.jpg);
}

<div class="background page1"> </div>

Answer 2

<div class="background" style="background-image: url(bg.jpg)"></div>