How to Change a Background Image Opacity Without Changing on Div Content

How can I change a background image opacity without changing on div content?

Because all children of an element are affected by its CSS, you cannot simply set the opacity of a background-image, however, there are several workarounds to this:

1. Use transparent background images (easiest imo)

Rather than setting the background image's opacity after the fact, just make the background image transparent in your favorite image editor (try gimp, it's free!) and save it as an image with transparency (like PNG).

2. Use positioning.

If you make the parent element have relative positioning and absolutely position child elements inside, you take them out of the flow and they will not be affected by the opacity of the parent. [Source]

3. Use sibling elements in the same position

If you separate the content from the parent and make the two elements siblings, you can position the elements that were children over the parent with z-indexing and set the opacity of the parent without affecting the child.

---

There are more, but one of those should get you what you want.

Background image opacity without affecting text

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>

How to change the opacity of background without changing the content of it?

Is this the sort of thing you're after?

  .about-section {

    height: 100%;

    padding-top: 50px;

    text-align: center;

  }

  

  .background {

    height: 100%;

    width: 100%;

    position: absolute;

    background: url(https://ichef-1.bbci.co.uk/news/976/media/images/83351000/jpg/_83351965_explorer273lincolnshirewoldssouthpicturebynicholassilkstone.jpg);

    background-repeat: no-repeat;

    background-size: contain;

    background-position: center;

    opacity: 0.3;

    

  }

<section id="about" class="about-section">

  <div class="background">

  </div>

  <div class="container">

    <div class="row">

      <div class="col-lg-12">

        <h1 class="head">About Us</h1>

      </div>

    </div>

  </div>

</section>

Change background color opacity without changing background image opacity

In this case I would consider the use of CSS variable on where I define the value of opacity that I change on hover:

:root {

  --opacity:0.8;

}

.hoverme {

    display: inline-block;

    padding:0px;

    width:5em;

    height:5em;

    background-color:black;

    cursor: pointer;

}

.hoverme:hover .inner {

   --opacity:1;

}

.hoverme .inner {

    margin: 0px;

    padding:0px;

    height: 100%;

}

.hoverme.red .inner {

    background-color: rgba(255,0,0,var(--opacity));

}

.hoverme.green .inner {

    background-color: rgba(0,200,0,var(--opacity));

}

.hoverme.yellow .inner {

    background-color: rgba(250,240,0,var(--opacity));

}

<div class="hoverme red"><div class="inner">text</div></div>

<div class="hoverme green"><div class="inner">text</div></div>

<div class="hoverme yellow"><div class="inner">text</div></div>

How can I change the background image opacity without affecting the background color?

Use an rgba color value and remove the opacity. For a white overlay you may use background:rgba(255,255,255, 0.5); while the last value (in this case 0.5) defines your transparency.

You can check this fiddle.

Change backgroundImage opacity css without changing text in it Opacity

Use a div inside a div to serve the background:

http://jsfiddle.net/0mgrt069/9/ (just fixed a typo)

<div class="col-12">
    <div class="background"></div>
    <h2>ABC</h2><p>WELCOME USER</p>
</div>

And CSS:

.background{
    background:url(http://animalscamp.com/wp-content/uploads/2011/12/Grizzly-Bear-3.jpg);
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: .4;
    width: 300px;
    height: 200px;

}
.background:hover{
   opacity:1;
}

How to change only the background image opacity?

You could also do this by a pseudo element. Something like this:

section {
   position: relative;
   padding: 15px;
   width: 100%;
   height: 700px;
}

section::before {
  content: "";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: .5; 
  background-image: url(../IMG/Photo_NR1.jpg);
}

So you do not need an image tag and you separating the design from content.

---

Related Topics