Transparent Gradient over Background Img not working - Safari 12.0

I’ve got a background image set as a linear gradient on top of an image. It displays properly in Chrome, but in Safari 12.0 it doesn’t show up. I inspected the element and get an error thrown that says ‘unsupported property value’. I can’t seem to figure out why. Any ideas you might have would be helpful. I’ll link the pen for the project below.

Thanks!

I’m not sure if this is the problem, but I noticed that in your CSS for your #hero-area, this is what you wrote:

background-image: linear-gradient(rgb(51, 51, 51, 0.6), rgba(51, 51, 51, 0.6)),

There’s a missing ‘a’ in the first rgb. It might affect something, try to include it and see if it works. Linear-gradient has partial support on Safari 12 according to https://caniuse.com/ (you can use this to check browser support), so that might also be an issue.

UGH, I sat there for a good half hour without seeing that typo. That took care of it. Thank you!

1 Like

Welcome, glad I helped! :slight_smile: Do mark this as solved yea
Happy Coding!