New Participant

Solved

Email Template Background Image and Transparency

Forum|Forum|1 year ago
April 15, 2024
2 replies
6488 views

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 -->

Marketo

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by Dave_Roberts

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.

Dave_RobertsAccepted solution

New Participant

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.

K

kenmckownAuthor

New Participant

Thanks so much for this, one thing I am noticing when coding it, is the transparency is not working when using the variable. It creates a string, but even with it coded, it has the background a solid color. If I hard code it, it works. Also is not something I can use without a string, most people are not going to know RGB color wheels.

Jo_Pitts1

Community Manager

@kenmckown ,

what does your string look like. Also, what does the rendered CSS/HTML look like when you are in preview mode?

Don't forget also to consider the VML you'll need to at least get text with background image working in Outlook. If you google, you'll find examples. Once you've had a crack and if you've not quite got there, I'm happy to help try and get you over the line.

Cheers

Jo

Jo_Pitts1

Community Manager

@kenmckown ,

yes - you can do a 'fall back' colour

yes - you can have a background image

yes - you can overlay text

yes - you can do these as variables.

WATCH OUT - Outlook will need special case coding and does not support transparency (or opaqueness depending on your point of view) for colours, backgrounds, etc.

Cheers

Jo

K

kenmckownAuthor

New Participant

How would I code these into the template to make the editable in the email builder? I want users to be able to add an image and select the transparency level without using code.

Jo_Pitts1

Community Manager

@kenmckown ,

There is good intel here: https://nation.marketo.com/t5/champion-program-blogs/email-template-quick-start-guide/ba-p/344792

It misses some stuff, but in terms of basics like how to use variables, it'll give you what you need.

Cheers

Jo

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded