Footer Background Gradient + Overlay Image

Hi there,
I’m a bit stuck.
AIM:
I’d like to have a background radial gradient in my footer but also retain the option to select a custom background overlay image in the Enfold theme settings so I can put a top shadow that repeats horizontally. Is that possible?

Currently, when I add the radial gradient to the #footer or .footer-color (or many other combinations) CSS, it is in front of the uploaded custom image and the shadow can’t be seen.

My CSS code:

#footer {
background-image: -ms-radial-gradient(center top, ellipse farthest-corner, #FFFFFF 0%, #DADBE2 100%);
background-image: -moz-radial-gradient(center top, ellipse farthest-corner, #FFFFFF 0%, #DADBE2 100%);
background-image: -o-radial-gradient(center top, ellipse farthest-corner, #FFFFFF 0%, #DADBE2 100%);
background-image: -webkit-gradient(radial, center top, 0, center top, 359, color-stop(0, #FFFFFF), color-stop(100, #DADBE2));
background-image: -webkit-radial-gradient(center top, ellipse farthest-corner, #FFFFFF 0%, #DADBE2 100%);
background-image: radial-gradient(ellipse farthest-corner at center top, #FFFFFF 0%, #DADBE2 100%);}

Custom background image (transparent png) set in Enfold theme settings

.footer_color {
    background: #ffffff url(" (Email address hidden if logged out) ") repeat-x scroll center top;
    z-index: 1;}

You will need login credentials to see the site. Below if required.