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

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

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

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

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

We have already done the most difficult part.

The code should look like this:

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)

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

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

The image background is in place! Amazing!

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.