Opacity applied to container is fading the text on top 'layer'...

[r_tist]

To resolve this issue I read about using pseudo-element with ::before applied.

However, my use case is different from a simple hero banner...

<div class="col-lg-6 order-lg-1 my-auto showcase-text">

Within there is some <h2> txt, <p> text and a button.

However, I'd like the background image in this overall container to have a light opacity.

As mentioned, it took back the opacity of all elements within this same block.

I tried pulling 'order-lg-1' as the key class to work with in order to define:

.order-lg-1 {

    position: relative;

    padding-top: 7rem;

    padding-bottom: 7rem;

   }

.order-lg-1::before {

    content: "";

    position: absolute;

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

    background-size: cover;

    opacity: 0.15;

    }

Then added 'position: relative' to the individual text styles <h2>, <p>...

I could use some tutelage how to get this right, considering there are multiple

classes involved.

Thank you.

[Jon Fritz · Accepted solution]

I'd go with "the easy way" on this one and just turn the jpg into a partially transparent .PNG file, then use it as a standard css background-image.

No need to fuss with opacity in the code then.

[Nancy OShea · Accepted solution]

Opacity effects everything. 

Use a background-color of rgba (A = alpha-transparency) which does not effect the container text.

Use case:

.col-lg-6 {

background-color: rgba(0,0,0,0.50) /**this is 50% black**/;

}

[osgood_ · Accepted solution]

If you have a requirement to insert an opacity layer over your background image and NOT affect the h2 and paragraph text content inside the parent container:

.order-lg-1 {

position: relative;

}

.order-lg-1::before {

content = "";

position: absolute;

top: 0;

width: 100%;

height: 100%;

background-color: rgba(0, 0, 0, 0.5); /* Black opacity */

background-color: rgba(255, 255, 255, 0.5); /*White opacity */

}

.order-lg-1 h2,  .order-lg-1 p {

color: #fff;

position: relative;

z-index: 10;

}

[r_tist]

I think all of these responses are valid and each presents a unique solution to the issue.

Thank you!