Mastering Background Image Darkening with CSS: Simple Yet Effective Techniques
Tags: webdev, css, beginners, html
Published: 2023-07-27 17:52:43

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oss36y961c75ty8gbfmr.jpg)
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nu0w6egs18msumsq14z8.gif)

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**](https://developer.mozilla.org/) 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 
```html
<!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

```css
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](https://pixabay.com/photos/workspace-laptop-mockup-photoshop-2443050/)

## 1. **Using the [FILTER](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) CSS Property**
Let's add this piece of code to our CSS styling we have above.
```css 
main{
    filter: brightness(50%);
    -webkit-filter: brightness(50%);
}
```
![The result after applying the filter CSS property](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9vcaeev4dur08pyta3px.jpeg)

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](https://developer.mozilla.org/en-US/docs/Web/CSS/::before) pseudo-elements

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

![The result after using the ::before pseudo-element](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i1j0oyz04dyv6mriudqd.jpeg)

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](https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode) CSS Property
```css 
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:
```css
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;
}
```