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;
How to add a background image to the entire email template?
To add a background image to your template, simply navigate to "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.
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;
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.
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 width of the content 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. And 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 firstname.lastname@example.org.
We would be glad to talk with you.