How can I change a background images opacity without affecting text?

Question

This is just a dummy example with no bg image, but If I did have a background image how would I achieve the goal of changing the image opacity and not affecting the text?

Here is a code example: HTML:

    <div class=bg-img>
  <p> Lorem Ipsum. </p>
</div>

CSS:

    .bg-img {
  background-img: url();
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.8;
}


p {
  color: white;
}

Look into using a pseudo element to hold the background. – A Haworth Nov 16 '22 at 23:48 — A Haworth, Nov 16 '22 at 23:48

score 1 · Accepted Answer · answered Nov 16 '22 at 23:16

So I don't think what you are asking is directly possible, but here's a way to get the effect you are looking for.

Seperate your content from the div that contains the background. Then wrap both of those in a container div and set that div to position: relative;

Now take your content and give it this code:

  position: absolute;
  top: 0; 
  left: 0;

Look what I did here:

.bg-img {
  background-image: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.VKpiZHX8o1MQRM3NLjQaGQHaE8%26pid%3DApi&f=1&ipt=46d3f722b06b0265f5e520392239e52a3b5e8a19f77a81b52fea18d43b5df116&ipo=images);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
   height: 250px;
   opacity: 0.5;
}

.contain {
  position: relative;
}


.contain p {
  position: absolute;
  top: 0; 
  left: 0;
}

<div class="contain">
 <div class=bg-img></div>
 <p> Lorem Ipsum. </p>
</div>

How can I change a background images opacity without affecting text?

1 Answers1