SOLVED
This is what my variables look like:
I was hoping to be able to pick a color and transparency level without having to input specific strings.
You aren't going to get any love from Microsoft (Outlook) on a PC in the transparency department b/c .... Microsoft 😞
Here's a look at the support charts for both the RGBA color codes and the "opacity" CSS property:
RGBA Support:
https://www.caniemail.com/features/css-rgba/
Opacity Support:
https://www.caniemail.com/search/?s=opacity
If you have to have a transparent color in the background, it might be best to use images that have the transparency baked into the image instead. The tradeoff with this is that you'll need specific background colors and can't just make one up on the fly (but it sounds like that'd be a challenge for the end users anyway). To get something like this setup with the end user in mind, I'd probably create a handful of images that are transparent versions of the background colors you'd want to work with.
For example, lets say your brand colors are orange and blue, here's a rundown of the images I'd create and how I'd name them:
1x Orange at 25%, 50%, 75% | bg-orange-25.png | bg-orange-50.png | bg-orange-75.png
1x Blue at 25%, 50%, 75% | bg-blue-25.png | bg-blue-50.png | bg-blue-75.png
1x White at 25%, 50%, 75% | bg-white-25.png | bg-white-50.png | bg-white-75.png
1x Black at 25%, 50%, 75% | bg-black-25.png | bg-black-50.png | bg-black-75.png
From here, you can use the mktoList variable rather than the mktoString variable to create a more defined list (closed input vs open input) to match up with your background image naming convention. I might make one mktoList variable for the color name (orange, blue, white, black) and another for the percent of transparency (25, 50, 75).
Here's a link to the Email Syntax documentation for the mktoList variable: https://experienceleague.adobe.com/en/docs/marketo/using/product-docs/email-marketing/general/email-...
That'd look something like this in code:
<meta class="mktoList" id="bg-transparent-color" mktoName="BG: Color" values="orange, blue, white, black" default="orange" mktoModuleScope="true">
<meta class="mktoList" id="bg-transparent-value" mktoName="BG: Transparency %" values="25, 50, 75" default="50" mktoModuleScope="true">
Then when you put this into play, you'd want to kind of combine the variables into the background URL string to queue off of the variables above, here's a very basic example using just the background property, but you'd want these to match up with your current code (just update the image URL to match something like this format):
<table style="background: url(https://domain.name.com/rs/###-XXX-###/images/bg-${bg-transparent-color}-${bg-transparent-value}.png);">
...
</table>
<!-- rendered code below w/ default variables from above -->
<table style="background: url(https://domain.name.com/rs/###-XXX-###/images/bg-orange-50.png);">
...
</table>
In the end, something like this would present the end user with two handles to control the background "color" (image) and opacity to make a more limited set of changes without needing to know any fancy RGBA stuff.
As far as I know you can layer multiple background images using the background CSS property, it's just a matter of how you write the CSS value for it. Here's a website with an example of multiple backgrounds:
https://www.w3schools.com/css/css3_backgrounds.asp
Notice that you can write them as independent properties (image, position, repeat, etc) which work as a comma-separated list or you can combine them into a single background property where the two pieces are comma-separated and the individual background properties are separated by a space.
There are more properties available within the background property which you can find examples of here:
https://www.w3schools.com/cssref/css3_pr_background.php
Here's a look at the syntax order for "all the things" you can couple into a single background value:
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;If you had multiple background images, you'd just add a comma to the end of this first set of properties and add in the properties for the 2nd image.
In terms of creating a 3-layer stack, I'd recommend that you set it up as a multiple-background image -- bottom layer w/ the image, top layer with the transparent overlay and then have the live text sit on top of the background image in the container itself. You could theoretically set up 3 different background images if one of them contained the text (then it would go on the top layer instead) and you'd just add that onto the background property with another comma-separated value for the property. It's not really best practice to include text as an image in the banner for a lot of reasons but it should work in a pinch if you're required to go that route.
.png)
- Copyright © 2025 Adobe. All rights reserved.
- Privacy
- Community Guidelines
- Terms of use
- Do not sell my personal information
Adchoices