/* Multiple backgrounds comma-separated */
.element {
  background-image: 
    url('top-layer.png'),
    url('middle-layer.png'),
    url('bottom-layer.png');
  background-size: 
    cover,
    100% 100%,
    auto;
  background-position:
    center,
    top,
    0 0;
}

/* Gradient on top of image */
.hero {
  background-image:
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url('background.jpg');
  background-size: cover, cover;
  background-position: center, center;
}

/* Hero section with overlay and image */
.hero {
  background-image:
    linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.3)),
    url('hero-image.jpg');
  background-size: cover, cover;
  background-position: center, center;
  background-attachment: fixed, scroll;
  height: 100vh;
  color: white;
}

/* Pattern overlay on image */
.textured {
  background-image:
    repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0,0,0,0.1) 10px, rgba(0,0,0,0.1) 20px),
    url('base-image.jpg');
}

/* Multiple gradient layers */
.gradient-stack {
  background-image:
    linear-gradient(90deg, rgba(255,0,0,0.1), transparent),
    linear-gradient(0deg, rgba(0,0,255,0.1), transparent),
    linear-gradient(45deg, rgba(0,255,0,0.1), transparent);
}