x ai css background-blend-mode 2026-06-09

2026-05-31

ai generated

`background-blend-mode`

Blends multiple backgrounds or background with content.

.JMQWk {
 background-image:
  linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
  url("photo.jpg");

 /* common: multiply, overlay, screen, etc. */
 background-blend-mode: multiply;
}

6. Complete Practical Example

<!DOCTYPE html>
<html>
<head>
<style>.hero {
 height: 100vh;

 background:
  linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6)),
  url("file:///C:/Users/xah/web/xahlee_org/xa/xamsi_calku/pink-mouthed_murex/pink-mouthed_murex_71m.jpg") center/cover no-repeat fixed;
 display: flex;
 align-items: center;
 justify-content: center;
 color: white;
 text-align: center;
}</style>
</head>
<body>
  <div class="hero">
    <h1>Beautiful Backgrounds with CSS</h1>
  </div>
</body>
</html>

7. Best Practices & Tips

Performance: Use background-size: cover carefully on large images. Consider webp format.
Accessibility: Always ensure sufficient contrast when using colored backgrounds.
Mobile: Test background-attachment: fixed — it’s expensive and sometimes disabled on mobile.
Fallbacks: Always provide a background-color before images/gradients.
Modern CSS: Use @supports for newer features.
Layering: First image in the list is on top.

/* Good pattern */
background-color: #111;                    /* fallback */
background-image:
  linear-gradient(...),
  url("image.webp");
background-size: cover;
background-position: center;