Pictures in the Background

The background-image property allows setting not just one picture, but entire layers.

1. Multiple Backgrounds

You can list images separated by commas. First in the list will be " on top " , subsequent ones under it.

.hero {
  background-image: url('stars.png'), url('mountain.jpg');
  background-position: top right, center;
  background-repeat: no-repeat;
}

2. background-blend-mode

This is Photoshop magic. You can blend background image with background color or with other images.

.banner {
  background-color: blue;
  background-image: url('pattern.png');
  background-blend-mode: multiply; /* Image will be tinted blue */
}