How do I combine a background-image and CSS3 gradient on the same element?

Leverage multiple background layers using commas. For example:

.element {
  background: 
    /* first (top) layer: gradient */
    linear-gradient(
      rgba(0, 0, 0, 0.5), 
      rgba(0, 0, 0, 0.2)
    ),
    /* second (bottom) layer: image */
    url("path/to/image.jpg") center/cover no-repeat;
}

The first listed background is rendered on top of subsequent ones, letting you visually combine a gradient overlay with a background image.

1. Multiple Background Syntax

When you define multiple backgrounds in CSS, each “layer” is specified separated by commas. The first layer in the list sits “on top,” the second beneath it, and so forth.

.element {
  background: 
    linear-gradient(to bottom, red, transparent),
    url("some-image.jpg");
}

• Layer #1: linear-gradient(to bottom, red, transparent)
• Layer #2: url("some-image.jpg")

The browser paints layer #1 over layer #2, so you see a red gradient overlay on top of the image.

Setting Additional Properties Per Layer

You can also control repeat, position, size for each layer:

.element {
  background: 
    /* top layer */
    linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0)),
    /* bottom layer */
    url("background.jpg") center/cover no-repeat;
}

• linear-gradient(...) uses default positioning.
• url("background.jpg") center/cover no-repeat; ensures the image is centered, covers the container, and doesn’t repeat.

2. Dealing with Browser Compatibility

1. Modern Browsers
   Most modern browsers (Chrome, Firefox, Safari, Edge) support multiple backgrounds and gradients without issue.

2. Legacy Fallbacks

   • For very old browsers (IE8 and below), you’ll need a fallback approach, since they don’t support multiple backgrounds or CSS3 gradients.
   • Typically, you might provide a single background image or a simpler gradient fallback.

3. Vendor Prefixes
   For older browsers, you may see -webkit-linear-gradient, -moz-linear-gradient, etc. to ensure backward compatibility. But in current best practices, many frameworks handle prefixing automatically, or modern browsers no longer need these.

3. Example with More Complex Gradients

.overlay-example {
  width: 500px;
  height: 300px;
  background: 
    /* top layer: angled gradient overlay */
    linear-gradient(
      135deg,
      rgba(255, 0, 0, 0.5) 0%,
      rgba(0, 0, 255, 0.5) 100%
    ),
    /* bottom layer: background image */
    url("landscape.jpg") center/cover no-repeat;
}

• Linear Gradient: Goes from top-left (135deg) with a 50% red overlay to bottom-right with a 50% blue overlay.
• Image: Centered, covering the container.

4. Optional: background-blend-mode

If you want to blend the gradient and image in creative ways (e.g., multiply, overlay, screen), you can use background-blend-mode:

.blend-example {
  background: 
    linear-gradient(rgba(255,0,0,0.5), rgba(0,0,255,0.5)),
    url("photo.jpg");
  background-blend-mode: multiply;
}

• The multiply blend mode multiplies colors from the top layer by those of the bottom layer, producing a combined effect.

Summary

1. Multiple Backgrounds: Write them in a comma-separated list, gradient(s) first if you want them on top, then image(s).
2. Positioning/Repeat: Each background can have its own sizing, position, and repeat rules.
3. Compatibility: Modern browsers handle this well; older ones might need fallback or prefixing.
4. Enhancements: background-blend-mode can create advanced overlay effects beyond simple layering.

This approach ensures you can combine a CSS gradient and a background image on one element, providing both a colored overlay and a visual image backdrop.