Opacity Issues on Microsoft Edge

Hey Guys

I am currently testing my site on multiple browsers and have issues on the Microsoft browser.

On the Microsoft browser, the opacity on the hero images has disappeared. I am using the element css on the image to get the opacity, which is working on the other browsers.

Could you please help on how to fix this issue?

Website: https://securityeverywhere.justsimplecreations.com/

Thanks
Sam

Hi Sam,

Your custom code is not working on Edge browser because you use height: 100% on an absolute positioned :before element. The Edge browser does not calculate 100% height wise on pseudo-elements.

I suggest that you use the Background feature of the section itself. You can add two backgrounds on the section element and you can use the lower background to add your image and the upper background to add the opaque color:

That way, you won’t need to add custom code to Element CSS.

We have a Working with Backgrounds playlist in our Youtube channel which I recommend that you consider watching. :slight_smile:

Thank you.

1 Like

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