How to increase the transparency of the background image without affecting the content?
Tags: css, webdev, html
Published: 2023-12-27 17:07:13

While creating landing pages, we often encounter the issue that the background image of the banner is too dark and any content added to the banner is not visible clearly. 

Consider the following code:

```
<!DOCTYPE html>
<html>
<head>
<style>
p {
  background-image: url('img_girl.jpg');
  padding: 100px 20px;
  background-repeat: no-repeat;
}
</style>
</head>
<body>

<h2>Background Image</h2>

<p>You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for a div element.<br>
By default, the background image <br>
will repeat itself in the direction(s)<br>
where it is smaller than the element<br>
where it is specified. (Try resizing the<br>
browser window to see how the<br>
background image behaves.</p>

</body>
</html>


```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qilp08p0e7aflbl77guf.png)

We cannot see the text clearly as the image's contrast is high. We try to reduce the opacity of the background image by adding `opacity: 0.5` to the style.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e2wnbyv4ueir8csebh3f.png)

But this reduces the opacity of the text/content as well. 

We can solve the issue using 2 different approaches:

**Approach 1:** Using Wrapper Container

```
<!DOCTYPE html>
<html>
<head>
<style>
.wrapper {
    background-image: url("img_girl.jpg");
  background-repeat: no-repeat;
}
p{
width: 100%;
heigth: 100%;
padding: 100px 20px;
 background-color: rgba(255, 255, 255, 0.5);  
}
</style>
</head>
<body>

<h2>Background Image</h2>
<div class="wrapper">
<p>You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for a div element.<br>
By default, the background-image<br>
will repeat itself in the direction(s)<br>
where it is smaller than the element<br>
where it is specified. (Try resizing the<br>
browser window to see how the<br>
background image behaves.</p>
</div>
</body>
</html>

```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a69nc3kdtgv6z3bzqlzt.png)

**Approach 2:** Using Linear Gradient

```
<!DOCTYPE html>
<html>
<head>
<style>
p {
  padding: 100px 20px;
    background-image: url("img_girl.jpg"), linear-gradient(rgba(255,255,255,0.5),rgba(255,255,255,0.5));
    background-blend-mode: overlay;
  background-repeat: no-repeat;
}
</style>
</head>
<body>

<h2>Background Image</h2>

<p>You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for a div element.<br>
By default, the background-image<br>
will repeat itself in the direction(s)<br>
where it is smaller than the element<br>
where it is specified. (Try resizing the<br>
browser window to see how the<br>
background image behaves.</p>

</body>
</html>

```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5cmcndvo62qz5y0m6v2k.png)

[![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hqmyq1twcon9ndguelyd.png)](https://www.buymeacoffee.com/hardiquedasore)

Follow us on [Instagram ](https://www.instagram.com/commitandpush/)