XF 1.5 Opacity on just an image in a container

[ArcheXerxes]

I am trying to get just the image inside of the container(i believe this what the box is). When I set the container 'Opacity: 0.2;' , it makes everything inside the container transparent to that level. I want just the background image to come up as transparent instead of all the words inside of it. I realize I can just edit the image but I am trying to learn good coding to achieve this instead of constantly editing photos.


Here is my code:

Regular Tempalte Page <--- whats the proper name for this page in xenforo

<div class="containerSidebar">

<div class="backgroundEdit">
<div class="Text"> Text Example</div>
<div class="Text2">Text Example 2</div>
</div>
</div>

Css Page for Template

.backgroundEdit
    {
    background-image: url(*imagelink to my server*) ;
    background-size: cover;
    opacity: 0.2;
}

What am I doing wrong and how do I fix it

 

[Arty]

Opacity changes opacity of entire container, including elements inside it. There is no way to make elements inside container not transparent.

However there are possible workarounds. Easiest workaround is to use semi transparent background image.

If you can't do that, create a pseudo element and make it semi transparent. Text is not inside that pseudo element, so it won't be affected by opacity

.backgroundEdit { position: relative; }
.backgroundEdit:before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-image: url(whatever); background-size: cover; opacity: 0.2; }

 

[ArcheXerxes]

@Arty this still makes everything that touchs this box transparent

 

[Arty]

Then you are doing something wrong. In code above opacity is added only to pseudo element that has background image, nothing else is transparent.