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)?

Cheers

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 ?

https://preview.webflow.com/preview/pauls-stunning-site-6e6eb6?utm_medium=preview_link&utm_source=designer&utm_content=pauls-stunning-site-6e6eb6&preview=fd7f109a8ae0bb327694e29504130578&workflow=preview

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.