How to adjust background image opacity without affecting text/logo on top?

Question

I'm attempting to code a webpage from scratch and I'm stumped on how or where to adjust the opacity on the background-image URL without affecting the text on top.

I thought about giving the background-image its own class but I'm kind of confused about where this would go.

* {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
}

.header {
  min-height: 100vh;
  width: 100%;
  background-image: url(images/lake.jpg);
  background-position: center;
  background-size: cover;
  position: relative;
}

nav {
  display: flex;
  padding: 2% 6%;
  justify-content: space-between;
  align-items: center;
}

nav img {
  width: 300px;
}

.logo {
  width: 0%;
  height: 0%;
  display: block;
}

.navbar {
  flex: 1;
  text-align: right;
}

.navbar ul li {
  list-style: none;
  display: inline-block;
  padding: 8px 12px;
  position: relative;
}

<section class="header">
  <nav>
    <div class="logo">
      <a href="index.html"><img src="https://cdn.pixabay.com/photo/2022/10/23/09/07/bicycle-7540835_960_720.png"></a>
    </div>
    <div class="navbar">
      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">About Me</a></li>
        <li><a href="">Portfolio</a></li>
        <li><a href="">Contact</a></li>
      </ul>
    </div>
  </nav>
</section>

The `header` is currently a wrapping element. All CSS properties effect it as a whole. So, you could create a specific element for the background and then give it some `opacity`. — ssc-hrep3, Oct 29 '22 at 08:43
You have a few options to fake it.like `CSS gradient` or `inset shadow` or `background-blend-mode` see possible duplicate : https://stackoverflow.com/questions/36679649/how-to-add-a-color-overlay-to-a-background-image/36679903#36679903 — G-Cyrillus, Oct 29 '22 at 08:57

score 1 · Answer 1 · edited Oct 29 '22 at 08:57

1

You can use linear-gradient to add opacity to the image like this:

body{
  background-image:linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)) ,url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg");

}

edited Oct 29 '22 at 08:57

tacoshy

10,642
5
17
34

answered Oct 29 '22 at 08:50

Shivam kaushal

173
1
9

score 0 · Answer 2 · answered Oct 29 '22 at 08:51

You can use pseudo-elements ::before or ::after to get a semi-transparent background and you can do this with just one container. Use something like this:

<article>
  Text.
</article>

Then write some css:

article {
  position: relative;
  z-index: 1;
}

article::before {
  content: "";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;  
  opacity: .4; 
  z-index: -1;
  background: url(path/to/your/image);
}

Here‘s an example:

body {
  background: #ccc;
}

article {
  position: relative;
  z-index: 1;
}

article:before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  opacity: .4;
  z-index: -1;
  background: url(https://31.media.tumblr.com/8ec07e49f33088c2e32c158ca4262eb2/tumblr_n5wav6Tz4R1st5lhmo1_1280.jpg);
}

<article>
  Text.
</article>

only works on non-replaced elements (eg not on inputs). Overall a "nasty" solution that requires a lot of hardcoding instead of using the simple solution of `linear-gradient` — tacoshy, Oct 29 '22 at 08:59

How to adjust background image opacity without affecting text/logo on top?

2 Answers2