Background image opacity (Pseudo element)?

Hi There,

Does anyone know how to set opacity on background images (I think this can be done a pseudo element if hand-coding)?


hi @Paul-k The one way is to add class to background image but WF doesn’t offer this option so the easiest way as you have suggested is use :before to set background and its opacity. I have done simple example you can study. :wink:

1 Like

The CSS opacity attribute can be used. This attribute has a range of values from 0 to 1. The styled element will be fully translucent if the property is set to 0.

1 Like

Hi @Stan thank you so much for the example it’s super helpful!

The only issue I have now if that the svg background I added sits on top of the other content so which is visible on the h1. I tried adding a z -index of -1 but this puts the svg behind the gradient bg?

Any ideas of a workaround ?

Thank you for that @bracknelson

hi @Paul-k all you have to do is to add higher z-index to another element. I have tried add z-index: 10 to home-header_content-left and it looks fine to me . You can remove z-index from :before if you do not need it. The number of z-index really doesn’t mother just choose one that will do job for you. Some developers use increasing by 10 some use 100.

1 Like

Ahhhh of course, cheers @Stan that’s done it - THANK YOU for your help. Much appreciated :slightly_smiling_face:

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.