Skip to main content

How to insert a picture into the background of a block in 8 steps

About Us
Published by jetbi
23 February 2022
57

Salesforce Marketing Cloud Content Builder allows significantly speed up email creation processes within an organization. There is no need to code every email as the standard drag-and-drop functionality provides predefined templates and blocks to create a new email with no code. However, there are some limitations in this standard tool, and in this article, I will be guiding you on how to create an image as a background.

Let’s look at the scenario below and layout general guidelines.

All you need is:

  1. Basic knowledge HTML and CSS;
  2. Upload the required background image into ContentBuilder;
  3. Create an email with content blocks;
  4. A little patience and a desire to figure it out :)

Short description:

  1. Copy and paste HTML from the email template to your IDE;
  2. Create class where we set background and add it into HTML;
  3. Add class to the desired block;
  4. Paste the code into a new Content Builder HTML Email Template. That’s it.

Detailed description:

  1. Create an email in ContentBuilder where you want to replace the background;
  2. Fill in the necessary block with any color that is not in the layout and the name of this color (this is necessary in order to find the desired block quickly). For example, I set the background color #FFFF00 (the yellow one).
  3. Navigate to the Code View (1) and copy the code (all code! It’s important) (2).

marketing-cloud-article-1

Why do we have to copy it? ContentBuilder doesn’t allow editing HTML code right there.

 

       4. Paste this code into any code editor (here I have VSCode). 

marketing-cloud-article-2

Note! The class that we are going to create now needs to be added to the end of the block (3). If you add to block (4) — this class will work only if the screen resolution is less than 640/480px.

 

     5. It's time to create a new class. I’ve called  the class ’.addImg’, prescribed the rules for it (here you will need your knowledge of HTML and CSS) and added them to the end of the block (3).

marketing-cloud-article-3

In url() you need to insert the path of the picture that you’ve uploaded earlier by copying the URL of the picture.

marketing-cloud-article-4

We have already done the most difficult part.

 

The code should look like this:

marketing-cloud-article-5

but it doesn’t work since it doesn’t belong to any block.

     

     6. Now it is needed to find a block with yellow (#FFFF00) color (5), and find a class attribute that belongs to this block (6)

marketing-cloud-article-6

 and insert the class name ‘addImg’ there. This is how the code will look like:

marketing-cloud-article-7

 

     7. Finally, make a copy of this code from VSCode (all) and paste into Email Template → Paste HTML

marketing-cloud-article-7

The image background is in place! Amazing!

marketing-cloud-article-8

 

The picture is displayed in: IOS, outlook, Yahoo email clients.

 

Unfortunately, the fallback color will be shown in Gmail. With this regard, don't forget to set the background color for Gmail’s subscribers. Otherwise, they will see a yellow background).

When clients expect to receive the email quickly and according to the requirements, this little workaround with the background will allow email specialists to overcome the platform's limitations and meet clients' demands. 


Irena Chistyakova
Marketing Cloud Developer
Question to the expert

We have available resources to start working on your project within 5 business days

1 UX Designer

1 Admin

2 QA engineers

1 Consultant

Related Articles
All articles
Salesforce
IoT
Native IT Service Management solution for Salesforce®
There are numerous ITSM options on the market, the most prominent of which are: Freshservice, ServiceNow, BMC Remedy, SolarWinds Service Desk, and so on. They are all outside of the Salesforce system, necessitate additional user training, and have the potential to complicate the business process. As a result, many Salesforce clients seek native ITSM Salesforce solutions to consolidate all processes on a single platform. This was a project for our group.
20 September 2022
7 reasons Why you should attend Dreamforce 2022
Have you ever wanted to be a part of a big community of like-minded people united by common goals, and values, passionate about learning new things, making friends, sharing experiences and simply having fun? We bet you have. That is what Dreamforce is about! We get that it may not be physically that easy to attend the event but it may be as hard to have enough spare time and motivation to watch it online. Here are 7 reasons why you should become a part of the biggest Salesforce event of the year.
20 September 2022
10 Effective ways to upsell Salesforce® to existing customers
When many companies look to increase their revenue, it's important to work with your most valuable potential market: your current customers. Given that acquiring a new customer costs 5 to 25 times more than retaining a current one, working on upselling and cross-selling is a much more profitable way to grow your business.
01 September 2022