CssHow-ToBeginner · 3 min read

How to Make Background Image Dark in CSS Easily

To make a background image dark in CSS, use a linear-gradient overlay with a semi-transparent black color on top of the image or apply the filter: brightness() property with a value less than 1. Both methods darken the image visually without changing the original file.

📐

Syntax

You can darken a background image in two common ways:

Overlay method: Use background-image with a linear-gradient that adds a transparent black layer over the image.
Filter method: Use the filter: brightness() CSS property to reduce the brightness of the image.

Example syntax for overlay:

background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('image.jpg');

Example syntax for filter:

filter: brightness(0.5);

css

/* Overlay method syntax */
.element {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('image.jpg');
  background-size: cover;
  background-position: center;
}

/* Filter method syntax */
.element img {
  filter: brightness(0.5);
}

💻

Example

This example shows how to darken a background image using the overlay method. The black transparent layer makes text on top easier to read.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Dark Background Image Example</title>
<style>
  body, html {
    margin: 0;
    height: 100%;
  }
  .dark-bg {
    height: 100vh;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1350&q=80');
    background-size: cover;
    background-position: center;
  }
</style>
</head>
<body>
  <div class="dark-bg">
    Darkened Background Image with Text
  </div>
</body>
</html>

Output

A full browser window with a large background photo darkened by a semi-transparent black overlay. White text is centered and easy to read on top.

⚠️

Common Pitfalls

Common mistakes when darkening background images include:

Using a fully opaque black overlay, which hides the image completely instead of darkening it.
Not setting background-size: cover; causing the image to repeat or not fill the area.
Applying filter: brightness() directly on a container with text, which also darkens the text unintentionally.

Correct usage ensures the image is darkened but content remains clear and visible.

css

/* Wrong: fully opaque overlay hides image */
.element {
  background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1)), url('image.jpg');
}

/* Right: semi-transparent overlay darkens image */
.element {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('image.jpg');
  background-size: cover;
  background-position: center;
}

📊

Quick Reference

Tips to darken background images effectively:

Use linear-gradient with rgba(0, 0, 0, 0.4-0.7) for adjustable darkness.
Always add background-size: cover; and background-position: center; for proper image display.
Use filter: brightness() only on images, not containers with text.
Test contrast to keep text readable and accessible.

✅

Key Takeaways

Use a semi-transparent black overlay with linear-gradient to darken background images without hiding them.

Apply background-size: cover and background-position: center for full and centered image coverage.

Avoid fully opaque overlays that block the image completely.

Use filter: brightness() carefully only on images, not on containers with text.

Check text contrast to ensure readability on darkened backgrounds.