Mastering Background Image Darkening with CSS: Simple Yet Effective Techniques

#webdev #css #beginners #html

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.

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.

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>

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;
}

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%);
}

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;
}

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; 
}

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;
}