Adjust Background Image Opacity in CSS

opacity is a CSS property and allows you to change the transparency (opacity) of an element.
By default, the value of all elements is 1. As you move this value closer to 0, the element begins to appear more and more transparent.

A common use case is to use an image as a background.
Adjusting the opacity of the background can improve the readability of text or achieve the visual effect you want.

However, there is no way to directly implement opacity for background-image only in CSS.
When you give the Opacity property to an element, it makes all sub-elements within it transparent as well as the background.

This can cause problems in terms of visual hierarchy or readability, especially when designing a page.
For example, you may want to make your background image less eye-catching so that the text on it stands out more clearly.
But if you only apply opacity, the text will also become transparent, which is an undesirable result.

In this article, you will learn two different methods to overcome this limitation in giving opacity to background images.
Thanks to these methods, you can apply the desired transparency to the background image while maintaining the visibility of contents such as text and title within the element.

Preliminary Information

If you want to follow this article practically, you need to be familiar with the following topics:

Method 1 — Using and Positioning a Separate Visual Element

In the first approach, we will use two separate elements:

wrap → Creates reference point with position: relative.
With img → position: absolute it is placed behind the contents and layering is done thanks to stacking context.

Example HTML structure for this approach:

<div class="wrap">
  <img src="background.jpg" alt="Arka Plan" class="bg-image">
  <div class="content">
    <h1>Merhaba Dünya</h1>
    <p>Bu metin arka planın üzerinde net şekilde görünecek.</p>
  </div>
</div>

CSS styles for this structure can be as follows:

.wrap {
  position: relative;   /* Referans noktası */
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.bg-image {
  position: absolute;   /* İçeriğin arkasına yerleşir */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;    /* Görseli kırpıp boyutlandırır */
  opacity: 0.5;         /* Arka plan görseline şeffaflık */
  z-index: 1;           /* İçerikten bir kademe aşağıda */
}

.content {
  position: relative;
  z-index: 2;           /* Görselin üstünde görünür */
  color: white;
  text-align: center;
  padding-top: 150px;
}

This combination of HTML and CSS will produce a result where text is placed over an image.

<style>
.demo-wrap {
  overflow: hidden;
  position: relative;
}

.demo-bg {
  opacity: 0.6;       /* Arka plan resmi şeffaf */
  position: absolute; 
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
}

.demo-content {
  position: relative; /* İçeriği üstte tut */
}

.demo-content h1 {
  padding: 100px 1em; /* Yukarı/aşağı boşluk + yatay boşluk */
}
</style>

<div class="demo-wrap">
  <img
    class="demo-bg"
    src="background.png"
    alt="Arka Plan"
  >
  <div class="demo-content">
    <h1>Merhaba Dünya!</h1>
  </div>
</div>
Aynı örneği senin yaptığın CSS/HTML yapısına göre uyarladım kanka:  

```html
<style>
.demo-wrap {
  overflow: hidden;
  position: relative;
}

.demo-bg {
  opacity: 0.6;       /* Background image is transparent */
  position: absolute; 
  left: 0;
  ball: 0;
  width: 100%;
  height:auto;
}

.demo-content {
  position: relative; /* Keep content on top */
}

.demo-content h1 {
  padding: 100px 1em; /* Space up/down + horizontal space */
}
</style>

<div class="demo-wrap">
  <img
    class="demo-bg"
    src="background.png"
    alt="Arka Plan"
  >
  <div class="demo-content">
    <h1>Hello World!</h1>
  </div>
</div>
```html

<style>

.demo-wrap {

  overflow: hidden;

  position: relative;

}



.demo-bg {

  opacity: 0.6;       /* Arka plan resmi şeffaf */

  position: absolute; 

  left: 0;

  top: 0;

  width: 100%;

  height: auto;

}



.demo-content {

  position: relative; /* İçeriği üstte tut */

}



.demo-content h1 {

  padding: 100px 1em; /* Yukarı/aşağı boşluk + yatay boşluk */

}

</style>



<div class="demo-wrap">

  <img

    class="demo-bg"

    src="background.png"

    alt="Arka Plan"

  >

  <div class="demo-content">

    <h1>Merhaba Dünya!</h1>

  </div>

</div>
```html
<div class="demo-pseudo">
  <div class="demo-content">
    <h1>Hello World!</h1>
    <p>This content appears clearly over the background image.</p>
  </div>
</div>
```html
<div class="demo-pseudo">

  <div class="demo-content">

    <h1>Merhaba Dünya!</h1>

    <p>Bu içerik arka plan görselinin üzerinde net şekilde görünür.</p>

  </div>

</div>
```css
.demo-pseudo {
  position: relative;      /* Creates a reference to the pseudo-element */
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.demo-pseudo::before {
  content: "";             /* Empty content */
  position: absolute;
  ball: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("background.jpg") no-repeat center center/cover;
  opacity: 0.6;            /* Transparency for background */
  z-index: 1;              /* One level below the content */
}

.demo-content {
  position: relative;      /* Keeps the content above the pseudo-element */
  z-index: 2;
  color:white;
  text-align: center;
  padding-top: 150px;
}
```css
.demo-pseudo {

  position: relative;      /* Pseudo-element için referans oluşturur */

  width: 100%;

  height: 400px;

  overflow: hidden;

}



.demo-pseudo::before {

  content: "";             /* Boş içerik */

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: url("background.jpg") no-repeat center center/cover;

  opacity: 0.6;            /* Arka plan için şeffaflık */

  z-index: 1;              /* İçerikten bir kademe aşağıda */

}



.demo-content {

  position: relative;      /* İçeriği pseudo-elementin üstünde tutar */

  z-index: 2;

  color: white;

  text-align: center;

  padding-top: 150px;

}
```html
<style>
.css-bg-example-2 .demo-wrap {
  position: relative; /* Reference for pseudo-element */
}

.css-bg-example-2 .demo-wrap:before {
  content: " "; 
  display:block;
  position: absolute;
  left: 0;
  ball: 0;
  width: 100%;
  height: 100%;
  opacity: 0.6; /* Background transparency */
  background-image: url('background.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.css-bg-example-2 .demo-content {
  position: relative; /* Keeps content on top */
}

.css-bg-example-2 .demo-content h1 {
  padding: 100px 1em;
  color:white; /* Increases text contrast */
}
</style>

<div class="css-bg-example-2">
  <div class="demo-wrap">
    <div class="demo-content">
      <h1>Hello World!</h1>
    </div>
  </div>
</div>
```html
<style>

.css-bg-example-2 .demo-wrap {

  position: relative; /* Pseudo-element için referans */

}



.css-bg-example-2 .demo-wrap:before {

  content: " "; 

  display: block;

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  opacity: 0.6; /* Arka plan şeffaflığı */

  background-image: url('background.png');

  background-repeat: no-repeat;

  background-position: center;

  background-size: cover;

}



.css-bg-example-2 .demo-content {

  position: relative; /* İçeriği üstte tutar */

}



.css-bg-example-2 .demo-content h1 {

  padding: 100px 1em;

  color: white; /* Yazı kontrastını artırır */

}

</style>



<div class="css-bg-example-2">

  <div class="demo-wrap">

    <div class="demo-content">

      <h1>Merhaba Dünya!</h1>

    </div>

  </div>

</div>
```css
/* Using overlay to increase text readability over the background image */
.example {
  position: relative;
  background: url("background.jpg") no-repeat center center/cover;
  color:white;
  padding: 100px 20px;
  text-align: center;
}

.example::before {
  content: '';
  position: absolute;
  ball: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Translucent layer */
  z-index: 0; /* Overlay layer in the background */
}

.example h1,
.example p {
  position: relative;
  z-index: 1; /* Keep the text above the overlay */
}
```css
/* Arka plan görseli üzerinde metin okunabilirliğini artırmak için overlay kullanımı */

.example {

  position: relative;

  background: url("background.jpg") no-repeat center center/cover;

  color: white;

  padding: 100px 20px;

  text-align: center;

}



.example::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.5); /* Yarı saydam katman */

  z-index: 0; /* Overlay katmanı arka planda */

}



.example h1,

.example p {

  position: relative;

  z-index: 1; /* Metin overlay’in üstünde kalsın */

}
```css
/* Dynamically adjust opacity with hover effect */
.example-button {
  opacity: 0.8;   /* Default opacity */
  transition: opacity 0.3s ease; /* Fading effect */
}

.example-button:hover {
  opacity: 1;     /* Full opacity on hover */
}
```css
/* Hover efektiyle opaklığı dinamik ayarlama */

.example-button {

  opacity: 0.8;   /* Varsayılan opaklık */

  transition: opacity 0.3s ease; /* Yumuşak geçiş efekti */

}



.example-button:hover {

  opacity: 1;     /* Hover durumunda tam opaklık */

}
```css
/* Use of transparent background in hero sections */
.hero-section {
  position: relative;
  background-color: rgba(255, 255, 255, 0.5); /* Translucent white layer */
  background-image: url('hero-image.jpg');
  background-blend-mode: multiply;            /* Mixes color and image */
  background-size: cover;
  background-position: center;
  padding: 150px 20px;
  text-align: center;
  color: #333;
}
```css
/* Hero bölümlerinde şeffaf arka plan kullanımı */

.hero-section {

  position: relative;

  background-color: rgba(255, 255, 255, 0.5); /* Yarı saydam beyaz katman */

  background-image: url('hero-image.jpg');

  background-blend-mode: multiply;            /* Renk ve görseli karıştırır */

  background-size: cover;

  background-position: center;

  padding: 150px 20px;

  text-align: center;

  color: #333;

}

Here, the background-blend-mode: multiply feature creates a modern and contrasty effect by combining the white translucent color with the image.

Result

In this article, you learned two different methods to overcome the limitations of giving opacity to background images.
In the first method, you saw how to position the image in the background with a separate tag <img>, and in the second method, you saw how to obtain a more flexible solution by using the pseudo-element ::before.

Both methods can be useful in different scenarios.

When you want to directly control the size of the image or when a simpler structure is required, the img-based approach may be more suitable.
If you want to take advantage of features like background-position, background-repeat and background-size, the pseudo-element based approach offers a much more powerful solution.

Ultimately, which method you choose depends entirely on the needs of the project and the requirements of the design.
The important thing is to achieve the visual effect you want in the background image and to ensure that the texts and other content always remain readable and in the foreground.

Login​

Preliminary Information​

Method 1 — Using and Positioning a Separate Visual Element​

Result​

Login

Preliminary Information

Method 1 — Using and Positioning a Separate Visual Element

Result