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.