Managing Multiple Backgrounds with Custom Properties

One of the great advantages of CSS custom properties is that they can be used as components of values. Suppose you are using multiple backgrounds to achieve the design effect. Each background will have its own properties such as color, image, repetition, location, etc., which can lead to verbose code!

Suppose you have four images:

 body {
  background-position: top 10px left 10px, top 10px right 10px, bottom 10px right 10px, bottom 10px left 10px;
  background-repeat: no-repeat;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-top-left.svg), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-right.svg), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-right.svg), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-left.svg);
}

Now you want to add a fifth background to the media query:

 @media (min-width: 1500px) {
  body {
    /* Repeat all existing backgrounds and add a fifth one. */
  }
}

This will be very verbose! You have to repeat all four images again and add the fifth one. Lots of code duplication!

One way is to create a variable for the basic background set and then add a fifth background more concisely:

 body {
  --baseBackgrounds: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-top-left.svg), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-right.svg), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-right.svg), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-left.svg);
  background-position: top 10px left 10px, top 10px right 10px, bottom 10px right 10px, bottom 10px left 10px;
  background-repeat: no-repeat;
  background-image: var(--baseBackgrounds);
}
@media (min-width: 1500px) {
  body {
    background-image: var(--baseBackgrounds), url(added-fifth-background.svg);
  }
}

Alternatively, you can create a variable for each background image and then group them together as needed, which may be clearer and easier to manage:

 body {
  --bg1: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-top-left.svg);
  --bg2: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-top-right.svg);
  --bg3: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-right.svg);
  --bg4: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-left.svg);
  --bg5: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-left.svg);
  background-image: var(--bg1), var(--bg2), var(--bg3), var(--bg4);
}
@media (min-width: 1500px) {
  body {
    background-image: var(--bg1), var(--bg2), var(--bg3), var(--bg4), var(--bg5);
  }
}

Here is a basic version that contains support queries:

Dynamically changing specific parts of values ​​is a big advantage of CSS custom properties!

Furthermore, for background, it is best to include the entire abbreviation as a variable. This makes it easier to put everything together at once without having to do it like this:

 --bg_1_url: url();
--bg_1_size: 100px;
--bg_1_repeat: no-repeat;
/* etc. */

It will be easier to put all the properties in abbreviation and use them as needed:

 body {  
  --bg_1: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-top-left.svg) top 10px left 10px / 86px no-repeat;
  --bg_2: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-top-right.svg) top 10px right 10px / 86px no-repeat;
  --bg_3: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-right.svg) bottom 10px right 10px / 86px no-repeat;
  --bg_4: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-left.svg) bottom 10px left 10px / 86px no-repeat;

  background: var(--bg_1), var(--bg_2), var(--bg_3), var(--bg_4);
}

That's it.

The above is the detailed content of Managing Multiple Backgrounds with Custom Properties. For more information, please follow other related articles on the PHP Chinese website!