Add a one unique div for three different images on three different pages?-CodePudding

Beginner here!

I am struggling with a task. It is requested to add one div ID with a unique name "div=heroimage" to all three different images on three different pages. However, they are in the same location on each page.

CSS Home, second page and third

#resort

    { 
                 height: 200px;
                 background-image: url(resort.jpg);
                 background-size: 100% 100%;
                 background-repeat: no-repeat; 
                

    }

#hotel

    {            

                 height: 200px;
                 background-image: url(hotel.jpg);
                 background-size: 100% 100%;
                 background-repeat: no-repeat; 


    }

#casa

    {           
                 height: 200px;
                 background-image: url(casa.jpg);
                 background-size: 100% 100%;
                 background-repeat: no-repeat; 
                 
    }

The other two are identical just with the ID name different and title. If I change all the three with "div=heroimage" what would be the best way to do it?

CodePudding user response：

You can create a class that has all the identical pieces in a . class .. Then the specific image, via unique # ids:

.heroimage{ 
    height: 200px;
    background-size: 100% 100%;
    background-repeat: no-repeat; 
}

#resort{
    background-image: url(resort.jpg);
}
#hotel{
    background-image: url(hotel.jpg);
}
#casa{
    background-image: url(casa.jpg);
}

The resulting divs would look like:

<div id="resort" class="heroimage">
<div id="hotel" class="heroimage">
<div id="casa" class="heroimage">

CodePudding user response：

You're allowed to add multiple classes as a value of a class attribute.

This:

.heroImage.option1 { … }

Matches:

<div class="heroImage option1"></div>

I would create a shared class and then unique classes for each version. The unique classes override a CSS variable, which adjusts the background image as necessary.

.heroImage {
  --backgroundImageUrl: url(resort.jpg);
  height: 200px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: var(--backgroundImageUrl);
}

.heroImage.hotel {
  --backgroundImageUrl: url(hotel.jpg);
}

.heroImage.casa {
  --backgroundImageUrl: url(casa.jpg);
}

Resorts page (default—doesn't need the override class)

<div class="heroImage"></div>

Hotel page

<div class="heroImage hotel"></div>

Casa page

<div class="heroImage casa"></div>

CodePudding user response：

They could be testing your understanding of CCS variables, stuff like:

background-color: var(--white);

Or it could be about inheritance

p { color: green; }