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 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.
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.
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 ?
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
.
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.