How to handle multiple background fills

Definition of "multiple background fills"

• one or none active solid fill
• one or more gradient fill above solid fill
• one or more image fill

Related CSS Properties & Functions

color & gradient

• background-color
• background
• linear-gradient
• radial-gradient
• repeating-linear-gradient
• repeating-radial-gradient
• conic-gradient
• repeating-conic-gradient
• url
• element() (not supported yet)
• image

image

• background-image
• background
• background-repeat
• object-fit
• object-position
• background-size
• background-clip
• background-origin

Design considerations

What we've considered while building multiple background support for css

• Multiple mixed types - <color>, <gradient>, and <image> - How should we handle them?
• Multiple types with inconsistent transforms - object-fit, object-position, background-size, background-clip, background-origin
• When to use baked image and when not to.
  • If there are multiple background values with mixed types and inconsistent transforms, it is often better to use baked image for cleaner code, and it's very probable that the box itself works as a artwork
  • When to use baked image as src attribute (<img src="">) or background property

Possible combinations

single solid fill

._1 {
  background: #fff;
}
._2 {
  background-color: #fff;
}

single solid fill with single gradient fill

._1 {
  background-color: #fff;
  background-image: linear-gradient(to bottom, #fff, #fff);
}

._2 {
  background: #fff;
  background-image: linear-gradient(to bottom, #fff, #fff);
}

no solid fill with single gradient fill

._1 {
  background: linear-gradient(to bottom, #fff, #fff);
}

._2 {
  background-image: linear-gradient(to bottom, #fff, #fff);
}

no solid fill with multiple gradient fill

._1 {
  background: linear-gradient(to bottom, #fff, #fff), linear-gradient(to bottom, #fff, #fff);
}

multiple images with different transforms

Using array syntax

._1 {
  background-image: url("image1.jpg"), url("image2.jpg");
  background-position: right bottom, left top;
  background-size: 50% 50%, auto;
}

Using pseudo elements - This is useful when there are less than 3 images - main, overlay, background

._1::before,
div::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
._1::before {
  background: url("image1.jpg") no-repeat;
  background-size: cover;
  transform: rotate(45deg);
  clip-path: circle(50% at 50% 50%);
}

._1::after {
  background: url("image2.jpg") no-repeat;
  background-size: cover;
  transform: scale(0.5);
}

Image resources management on SSG frameworks

• Next.js (Docs not ready)