Email Template Background Image and Transparency

kenmckown · ‎04-15-2024

I am building out a master email template, and one of the modules I want to create has a background color (that needs to be transparent) as well as a background image with text overlaying it. I want to know if I can build the transparent color and image as variables into the template so these can be set via the email editor.

Here is the current CSS I am using to achieve this:

<style>
      			.transparentbg {
                  background-image: 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?version=0');
                  background-size: cover;
                  background-color: #54565A;
                  width: 640px;
                  height: 300px;
          		@media screen and (max-width:640px) {
                  .block { display: block !important; width: 100% !important; } 
                }
      	</style>

And here is my table for the module:

<!-- Transparent Banner Image -->
								<table class="mktoModule" mktoName="Full Width Image Section" id="full-width-img-section-transparent" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%!important;height:300px;margin: 0 auto;border-spacing: 0;border-collapse: collapse;background-image:${BannerSection-Bg}">
									<tr>
										<td class="transparentbg" align="center" valign="top" style="vertical-align:middle;text-align:center;">
											<div class="mktoText" id="TransparentText1" mktoname="Text" style="color: #ffffff; font-size: 30px; font-weight: bold;">LOREM IPSUM</div>
                                          	<div class="mktoText" id="TransparentText2" mktoname="Text" style="color: #ffffff; font-size: 30px; font-weight: bold;">DOLOR SIT AMET!</div>
                                          	<p class="mktoText" id="TransparentText3" mktoname="Text" style="color: #ffffff; font-size: 17px; font-weight: none;">LOREM IPSUM DOLOR SIT AMET CONSECURETU</p>
										</td>
									</tr>
								</table>
								<!-- Transparent Banner Image End -->

Dave_Roberts · ‎04-17-2024

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.

View solution in original post