Managing Multiple Backgrounds with Custom Properties

One cool thing about CSS custom properties is that they can be a part of a value. Let’s say you’re using multiple backgrounds to pull off a a design. Each background will have its own color, image, repeat, position, etc. It can be verbose!

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-top-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);

}
You want to add a … Read article
The post Managing Multiple Backgrounds with Custom Properties appeared first on CSS-Tricks.

Link: https://css-tricks.com/managing-multiple-backgrounds-with-custom-properties/