The CSS background property has just about the same support as the background-image and background-color in email: https://www.caniemail.com/search/?s=background so you might be able to get away with consolidating your CSS a bit to look something like:
<style>
.transparentbg {
background: #54565A linear-gradient(rgba(84, 86, 90, .85), rgba(84, 86, 90, .85)), url('https://go.autoshopsolutions.com/rs/180-DGD-014/images/Layer 1.png') cover;
width: 640px;
height: 300px;
}
@media screen and (max-width:640px) {
.block { display: block !important; width: 100% !important; }
}
</style>
Check out the syntax for "background" here: https://www.w3schools.com/cssref/css3_pr_background.php
To make this editable, you'd want to setup some variables like Jo mentioned, and that might look something more like this:
<head>
<meta class="mktoString" id="SectionID-bg-color" mktoName="Section: BgColor" default="#54565A" mktoModuleScope="true">
<meta class="mktoString" id="SectionID-bg-gradient-1" mktoName="Section: BgGradient 1" default="rgba(84, 86, 90, .85)" mktoModuleScope="true">
<meta class="mktoString" id="SectionID-bg-gradient-2" mktoName="Section: BgGradient 2" default="rgba(84, 86, 90, .85)" mktoModuleScope="true">
<meta class="mktoString" id="SectionID-bg-image" mktoName="Section: BgImage" default="#54565A" mktoModuleScope="true">
<style>
.transparentbg {
background: ${SectionID-bg-color} linear-gradient(${SectionID-bg-gradient-1}, ${SectionID-bg-gradient-1})), url('${SectionID-bg-image}') cover;
width: 640px;
height: 300px;
}
@media screen and (max-width:640px) {
.block { display: block !important; width: 100% !important; }
}
</style>
</head>
If you consolidate the CSS or not, the idea is about the same, just setup some variables like in the example above and then add those into your CSS in place of the actual values. An important note about the setup here is that you'll want to have your <meta> tags for the variable come before the <style> tag in the <head>.
For the "SectionID" part of the variable ID and the "Section: " in the mktoName, those can be optional but helpful to the end user to understand where these changes will occur. So something like "Banner-bg-color" (where the id of the module is "Banner") and then "Banner: BgColor" for the mktoName so that the end user can see which section/module this is associate with.
For the mktoModuleScope, I'm assuming this is for a module so it's set to "true" but it's not for a module you can change it to "false" to make these variables appear in the global scope rather than within the module editor controls.
.png)