• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.5 Opacity on just an image in a container

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>
Css Page for Template

    background-image: url(*imagelink to my server*) ;
    background-size: cover;
    opacity: 0.2;
What am I doing wrong and how do I fix it


Well-known member
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; }


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