Conflicting rules with background-image with image and gradients.

Hello,

We just updated to the most recent version and noticed on our sites that assign a background with a linear-gradient and an background-image that the way the CSS is written with the gradient the background image is overridden by the gradient rule instead of having both work together as they did previously.

Example of new formatting:

.fl-page-header {
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.3) !important;
background-color: rgb(0, 88, 91) !important;
background-image: url(https://silvermoonrace.com/wp-content/uploads/sites/11/2018/01/moon-stars-pattern-10.png) !important;
background-position: center center !important;
background-repeat: repeat !important;
background-attachment: fixed !important;
background-size: auto !important;
background-image: linear-gradient(135deg, rgb(0, 194, 201), rgb(0, 88, 91), rgb(227, 85, 0)) !important;
}

In the above instance, the second instance background-image attribute overrides the image first one with the image.

When I manually edit the code to this way it works setting it to background instead of background-image and combining the image and linear-gradient attributes.

.fl-page-header {
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.3) !important;
background-color: rgb(0, 88, 91) !important;
background: url(“/wp-content/uploads/sites/11/2018/01/moon-stars-pattern-10-300×300.png”), linear-gradient(135deg, rgb(0, 194, 201), rgb(0, 88, 91), rgb(227, 85, 0)) !important;
background-position: center center !important;
background-repeat: repeat !important;
background-attachment: fixed !important;
background-size: auto !important;
}

Please advise on how to best fix this so that I don’t have to manually update the CSS on all our sites. We do this effect on a lot of our sites where we do a linear-gradient and then have a semi-transparent image tile over it for visual effect.

Thanks for taking the time to review.