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 "Appearance" → "General Settings" 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.
Additionally, you can center the image or set its position.
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 sure that your image is wide enough! It is necessary that the image fits the dimensions of the structure itself (its width and height). Otherwise, the image will be non-responsive on the desktop;
But don't be scared if you see only a small part of the image - add a "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 want to resize the background image to cover the entire structure's width, add a "background-size: 100%" attribute to the <style> tag of your content element:
Please ensure your image is sufficiently wide to cover the entire content width and use a "Dynamic spacer" to stretch the content in height.
Or, if you need to resize the background image to make sure the image is fully visible, please add a "background-size: contain" attribute to the <style> tag of your content element. Also, use a "Dynamic spacer" to stretch the content in height to increase it.
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.