DEV Community

Gyau Boahen Elvis
Gyau Boahen Elvis

Posted on

Mastering Background Image Darkening with CSS: Simple Yet Effective Techniques

Upon scrolling through amazing landing page designs on Behance I found myself googling how to darken background images with CSS because I wanted to build a page like the one below.
A landing page with darkened background image
I went through a few posts on Stack overflow and the answers were so overwhelming. I then decided to ask ChatGPT how I would darken my background image with CSS. The answers Stack Overflow suggested were not so different from what ChatGPT's answers. Both suggested I use an overlay then apply the background-color property to the overlay and set it to rgba(0,0,0,0.7). They also suggested I use the filter property which ended up reducing the brightness of the text on the page too. Another suggestion was that I use before or after pseudo-elements.

Image description

As a beginner who is not so comfortable with these concepts, I decided to read on the various background image and background color properties on Mozilla Developer Network and found the two-line secret to darkening background images.

But before that let's go through using the various concepts suggested by ChatGPT and Stack overflow to darken our background image.
Throughout this article this the HTML codes we will be using

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main>
        <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, laudantium.</div>
    </main>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

A few CSS Styling to make our work look nice

body{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
main{
    width: 100vw;
    height: 100vh;
    background-image: url("./img/workspace-gdfb557ae9_1280.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}
main .text{
    color: #fff;
    font-size: xx-large;
}
Enter fullscreen mode Exit fullscreen mode

This the link to the background image we will be using in this article here

1. Using the FILTER CSS Property

Let's add this piece of code to our CSS styling we have above.

main{
    filter: brightness(50%);
    -webkit-filter: brightness(50%);
}
Enter fullscreen mode Exit fullscreen mode

The result after applying the filter CSS property

This is one of the easiest techniques of darkening your background image. The only disadvantage to this technique is that it reduces the legibility of the text on your page.

2. Using the ::before pseudo-elements

main{
    position: relative;
}
main::before{
    content: "";
    width:100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    position: absolute;
}
main .text{
    position: relative;
    z-index: 20;
}
Enter fullscreen mode Exit fullscreen mode

The result after using the ::before pseudo-element

For just darkening your background image while making sure the texts on the page are legible, this just too much from my point of view and probably every beginner's point of view. It contains so many concepts that may be difficult for beginners to grasp.

3. Using the background-blend-mode CSS Property

main{
    background-color: rgba(0, 0, 0, 0.7);
    background-blend-mode: darken; 
}
Enter fullscreen mode Exit fullscreen mode

This the simplest and the most effective way of darkening your background image while making sure your texts on your page are legible.

Conclusion

There are several methods to darken a background image using CSS, but the most effective and beginner-friendly approach is by using the background-blend-mode property with the value of darken. This method allows you to darken the background image without affecting the text's legibility on the page.

Here's the final CSS code using the background-blend-mode property:

main {
  width: 100vw;
  height: 100vh;
  background-image: url("./img/workspace-gdfb557ae9_1280.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
  background-blend-mode: darken;
}
main .text {
  color: #fff;
  font-size: xx-large;
}
Enter fullscreen mode Exit fullscreen mode

Top comments (5)

Collapse
 
artydev profile image
artydev

Thank you🙂

Collapse
 
qbentil profile image
Bentil Shadrack

Interesting🙌
Thank you for this insight

Collapse
 
brightomolayo profile image
BrightOmolayo

Thank you

Collapse
 
ibrahzizo360 profile image
Ibrahim Aziz

Nice!

Collapse
 
vansh_kathnawal_93977de8e profile image
vansh kathnawal

Thankyou so much sir ,very very grateful