{"id":15314,"date":"2019-11-06T21:21:15","date_gmt":"2019-11-06T21:21:15","guid":{"rendered":"http:\/\/www.glitnir.com\/?page_id=15314"},"modified":"2019-11-06T21:31:09","modified_gmt":"2019-11-06T21:31:09","slug":"background-image","status":"publish","type":"page","link":"https:\/\/www.glitnir.com\/index.php\/using-the-editor\/background-image\/","title":{"rendered":"Adding a background image to your emails"},"content":{"rendered":"
\n
\n\t

Here's how to add background images to your content rows to create even more stunning emails!<\/p>\n

 <\/p>\n

A few examples<\/h3>\n

You can repeat a pattern, like the wood boards shown in the screenshot below (taken from on one of the templates available in\u00a0BEE Pro<\/a>):<\/p>\n

\"Example<\/a><\/p>\n

Or you can use a single background image that covers the whole width of the message (e.g. in the heading of the email). This too is easy to do with the new\u00a0Row Background Image<\/em>\u00a0feature in the BEE editor.<\/p>\n

 <\/p>\n

Modifying the email message from above and increasing the size of\u00a0the coffee beans image, the same message could now adopt a different design and look like this:<\/p>\n

\"\"<\/p>\n

<\/h3>\n

Where to find it?<\/span><\/h3>\n

When you select a row in the design pane, you'll see that the\u00a0Row Properties<\/em>\u00a0panel\u00a0now includes a new\u00a0Row background image\u00a0<\/em>section:<\/p>\n

\"Setting<\/p>\n

Let's look at the settings included in this new section.<\/p>\n

<\/h3>\n

Row background image settings explained<\/span><\/h3>\n

 <\/p>\n

Selecting the image<\/strong><\/p>\n

Once you click to enable this feature, you can upload the\u00a0image that will be used as background via the file manager by using the\u00a0Change image<\/em>\u00a0button. Alternatively, you can copy and paste the\u00a0image URL into the URL box if you wish to use an image hosted elsewhere.<\/p>\n

 <\/p>\n

Full width, Repeat, and Center<\/strong><\/p>\n

These three settings - Full width, Repeat, and Center - are important for aligning and finding the best fit for your background image or pattern within your message.\u00a0Let's see how they can be used.<\/p>\n

 <\/p>\n

Full width<\/strong><\/p>\n

When selected, the image is used as a background for the\u00a0entire width of the row. For example, here is a light gray pattern repeated across an entire row (click on the image to see a larger version where you can see the background pattern).<\/p>\n

\"Light<\/a><\/p>\n

 <\/p>\n

When not selected, the background image is applied only to the\u00a0Content<\/em>\u00a0area. The width of the\u00a0Content<\/em>\u00a0area is set in the\u00a0Body<\/em>\u00a0tab of the\u00a0Property<\/em>\u00a0panel.<\/p>\n

Here is the same pattern applied only to the content area.<\/p>\n

\"Light<\/a><\/p>\n

 <\/p>\n

Repeat<\/strong><\/p>\n

When selected, the image is repeated. This works well with symmetrical patterns. If you chose to repeat the coffee beans image, for instance, the message would now look like this:<\/p>\n

\"\"<\/p>\n

Use \"Full width\" and \"Repeat\" together if you want to repeat a pattern across the width of the row. If the row is higher than the height of the image, the pattern will be repeated vertically too.<\/p>\n

 <\/p>\n

Center<\/strong><\/p>\n

When selected the image is centered. If \"Repeat\" is also active, the image is centered and then repeated to the left and to the right. If you \"Repeat\" without centering, the image is positioned in the top-left corner of the row, and then repeated to the right.<\/p>\n

All three settings can be enabled and disabled independently of each other. Try uploading a small image and play around with them to understand how the positioning of the image is affected.<\/p>\n

<\/h3>\n

Email client compatibility<\/span><\/h3>\n

The BEE editor uses advanced email design techniques to ensure that background images are rendered on most email clients. According to our most recent tests, the only email clients for which background images were not shown, were:<\/p>\n