1. 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

Discussion in 'Styling and Customization Questions' started by ArcheXerxes, Aug 17, 2016.

Tags:
  1. ArcheXerxes

    ArcheXerxes Member

    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
    HTML:
    <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

    HTML:
    .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
     
  2. Arty

    Arty 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
    Code:
    .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; }
     
  3. ArcheXerxes

    ArcheXerxes Member

    @Arty this still makes everything that touchs this box transparent
     
  4. Arty

    Arty 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.
     

Share This Page