Background image opacity without affecting text

Question

I have a problem with my background image and text. I only want to apply the opacity to background image but mine, the text was affected.

HTML

<div class="content">
        <div class="box">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
</div>

CSS

.content{
    background: url(../img/103_n.jpg) left top no-repeat, url(../img/103_n.jpg) right bottom no-repeat;
    opacity: 0.5;
}

.content .box p{
    opacity: 1;
}

Have you tried giving the content a z-index of -1 and then the text a z-index of 1 — Max Loyd, Mar 12 '19 at 09:57
@LaljiTadhani the link you attach is using `background-color` and i need not to make my background edit the opacity — Ven, Mar 12 '19 at 09:57

score 3 · Answer 1 · answered Mar 12 '19 at 09:59

3

There is no background opacity property but you can fake it with pseudo element:

.content {
  position: relative;
}

.content::after {
  content: "";
  background: url(../img/103_n.jpg) left top no-repeat, url(../img/103_n.jpg) right bottom no-repeat;
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

answered Mar 12 '19 at 09:59

Miroslav Jonas

5,407
1
27
41

`z-index: -1` actually just hid the image from me - maybe it was because the had a bg-color and the image was just hiding behind the body. Regardless, I had to throw `z-index: 1;` on the non-pseudo background element and keep `z-index: -1;` on the pseudo element. Side not: using just `:` as opposed to `::` is supposed to support at least IE 8, but maybe even further back. – Shmack Oct 12 '22 at 20:07

score 0 · Accepted Answer · answered Mar 12 '19 at 10:04

Follow this link How can i change background image opacity without changing on div content?

.content {
  position: relative;
}

.content::after {
  content: "";
  background: url('https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg') left top no-repeat, url('https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg') right bottom no-repeat;
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

<div class="content">
        <div class="box">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
</div>

you should vote to close as duplicate – Temani Afif Mar 12 '19 at 10:08 — Temani Afif, Mar 12 '19 at 10:08
@Hien Nguyen Thanks it's working well. – Ven Mar 12 '19 at 10:12 — Ven, Mar 12 '19 at 10:12

score 0 · Answer 3 · answered Mar 12 '19 at 10:05

You can using before (or) after and set opacity

    .content {
      position: relative;
    }

    .content ::after {
    content: "";
    position: absolute;
    background:#000 \also give any color for background;
    opacity: 0.5;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width:100%;
    height:100%;  
    }

score 0 · Answer 4 · answered Mar 12 '19 at 10:07

To be able to separate the parent opacity from its children, you need to use a pseudo selector for the parent:

.content:after {
    content: '';    
    background: url(../img/103_n.jpg) no-repeat, url(../img/103_n.jpg) right bottom no-repeat;
    opacity: 0.5;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Background image opacity without affecting text

4 Answers4