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.


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 (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!