Background images can complement the design of your email template - make it more attractive and eye-catching. It can be used to display a full image or create a repeating background pattern behind your content. Stripo Email Builder supports background images for:
Entire email template;
Stripe;
Structure;
Container.
How to add a background image to the entire email template?
To add a background image to your template, simply navigate to the "General Styles" → "Global Styles and Layout" menu, turn the "Background image" option on, and upload an image.
The background image should be big enough to cover the email content both in height and width. Otherwise, you can use the "Repeat image" option if the image design allows or set up the suitable position, width and height with the added controls:
Just to let you know, some email clients (Windows 10 Mail, Android 4.4, Gmail app on iOS & Android with non-Gmail account) won't support a background image for the entire email.
As a backup, we recommend selecting a background color similar to the image in the same "General Setting" menu.
How to add a background image to the Stripe, Structure, and Container?
To add a background image to the Stripe, Structure, or Container, you need to:
Select the required content element (let's consider "structure" as an example);
Turn on the "Background image" option and upload an image;
Important to note: some email clients (Windows Outlook 2007 – 2019, Windows 10 Mail, Android 4.4, Gmail app on iOS & Android with non-Gmail account) won't support a background image.
As a backup, we recommend selecting a background color similar to the image.
Please be aware that you can change the image sizes by UI controls of position, width and height.
You can use "Cover" option - to resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges.
Also "Contain" - the image fits inside the container without cropping; empty space may appear.
Or "Auto" - the background image is displayed in its original size.
Additionally you can add the "Spacer" block and turn on the "Dynamic Spacer," drop it over and under the button block, and stretch it.
Due to the narrower screen on mobile devices, the background image cannot be made responsive. As a result, only a portion of the background is visible on mobile screens compared to desktop screens.
As you can see, only part of the background image is visible on mobile.
If you need to resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges - please choose cover option. Additionally we turned off the responsive structure so containers in 1 row on mobile now:
Thank you for taking the time to read our articles. We hope you will find this information helpful.
If you have any additional questions, please email us at support@stripo.email.
We would be glad to talk with you.