Selectively changing only one of multiple HTML background image sizes with CSS

Question

I'm writing a website that uses multiple images for its background as follows,

background-image:
   url('someimage1.png'),
   url('image2.png'),
   url('image3.png');

And I can change certain CSS style properties of each image in one statement like so,

background-size:
   5vw auto,      // styles image 1
   100% 99%,      // then image 2
   auto 98vh;     // and 3

Is it possible for me to, for example, change the background-size property of the third background image without in any way changing the that of the first and second? I'd like to be able to change one of the image's sizes in a 'responsive' way, but for the other two to stay the same size regardless.

Preferably I'd be able to achieve this without using javascript.

Answer 1

You can use variables and easily update them with media query or custom classes:

:root {
  --size-one: 100% 50%;
  --size-two: 50% 100%;
  --size-three: 80% 100%;
}

.back {
  height: 200px;
  background-image: linear-gradient(to right, red, red), linear-gradient(black, blue), linear-gradient(30deg, black, green);
  background-repeat: no-repeat;
  background-size: var(--size-one), var(--size-two), var(--size-three);
}

.update {
  --size-three: 80% 80%;
}

@media all and (max-width:800px) {
  :root {
    --size-one: 80% 50%;
  }
}

<div class="back">
</div>
<div class="back update">
</div>