Adding gradient overlay to a panel widget with background image

Hi there,

i need some help. I am trying to add some css gradient overlay to a widget panel added by the page builder. The widget it self has added a background image here: (Widget Styles -> Design)

HTML with the widget is holding some basic search box.

<div class="hero-search panel-widget-style panel-widget-style-for-153-0-0-0">

CSS

#panel-153-0-0-0 > .panel-widget-style {
        background-image:url(bg.jpg);
        background-position:center center;
        background-size:cover;
}

Gradient

background: #43C6AC;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #F8FFAE, #43C6AC);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #F8FFAE, #43C6AC); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

Now how to add this as an overlay to the background image without affecting the widgets inner content? I tried out using ::after and ::before but without luck.

I also tried adding it to the css rule for the background image but this made the image disappear and only showing the gradient.

thanks in advance