You can add a background image behind text in an email by applying custom in-line CSS. This is not a built-in feature of the Act-On Legacy Email Composer, but you can achieve the effect by editing the HTML of your message.
Quick Reference (Advanced Users) - Click to Expand
- Download your email’s HTML file.
- Find the
<p>element where you want the background image applied. - Add in-line CSS with
background-image, fallbackbackground-color, height, and padding. - Use the public URL of an image hosted in your Act-On Image Library.
- Save and re-upload the updated HTML file to your email design.
Try it like this: Upload your background image to the Image Library, copy its public URL, and add it to the
background-image property in your paragraph’s in-line style. Include padding and a fallback background colour to ensure readability across email clients.Essentials to Get Started
- A hosted image URL. To make this easy, upload your image to the Act-On Image Library and use the Public URL.
- A draft email or template where you want to apply the background image.
Instructions
- In the Email Composer, navigate to Design > Download Creatives.
Open the downloaded HTML file. In the opening tag of the
<p>element where the background image should appear, add in-line CSS similar to:style="padding-top: 20px; height: 400px; background-color: #003b5c; text-align: center; vertical-align: middle; background-image: url('URL-to-your-image');"- Replace URL-to-your-image with the actual public URL from your Act-On Image Library.
- Include a fallback background-color, since not all email clients support background images.
- Save your updated HTML file and return to the composer to continue editing or upload the revised design.
Notes
- Adjust image size, padding, and positioning to fit the layout of your message.
- Act-On Support cannot troubleshoot or modify custom HTML or CSS.