Gradient Background with Opacity Over Background Image.

Hello,

I have a Color Section element and it has a background image set. I want to have a gradient background with opacity that overlays the background image. However it keeps removing the gradient and just shows the background. After looking at it with dev tools in chrome the css is being cancelled out by something not sure what.

Here is the css I tried:

#home-hero {
background-color: linear-gradient(90deg, rgba(26, 188, 156, 0.5) 25%, rgba(0, 84, 127, 0.5) 100%) !important;
background-color: -moz-linear-gradient(left, rgba(26, 188, 156, 0.5) 25%, rgba(0, 84, 127, 0.5) 100%) !important;
background-color: -webkit-linear-gradient(left, rgba(26, 188, 156, 0.5) 25%, rgba(0, 84, 127, 0.5) 100%) !important;
background-color: -o-linear-gradient(left, rgba(26, 188, 156, 0.5) 25%, rgba(0, 84, 127, 0.5) 100%) !important;
background-color: -ms-linear-gradient(left, rgba(26, 188, 156, 0.5) 25%, rgba(0, 84, 127, 0.5) 100%) !important;
background-image: url(http://johnstowntaxes.com/wp-content/uploads/2015/10/header-mob_2x.jpg) !important;
background-attachment: scroll;
background-position: top center;
}

Any help would be appreciated!

Thanks