Documentation Index

For the complete documentation index, see llms.txt. Markdown versions of docs pages are available through the page's alternate Markdown link.

Current page: Adding background images to your email layouts - You can add background images behind your content layers that work on all email clients (including Outlook) to Row, Column, Wrapper and Hero layers in your email by applying an image fill in Figma.. Machine-readable page: /emailify/design/background-images.md.

Adding background images to your email layouts

You can add background images behind your content layers that work on all email clients (including Outlook) to Row, Column, Wrapper and Hero layers in your email by applying an image fill in Figma.

You can add a background image to any Row, Column, Wrapper or Hero layer in your email design by clicking the layer in Figma, then clicking the + icon next to the Fill panel in the layer's Figma properties and setting the fill type to Image. The example above shows this on a Column layer, but the same workflow also applies to Row, Wrapper and Hero layers. That image fill will be applied as a background image when your email is exported to HTML from the plugin.

To increase the contrast between your background image and the content layers, you can add an extra semi-transparent color on top of your layer's background image fill (by clicking the + icon next to the Fill panel in the layer's Figma properties) and set the new Gradient or Solid fill to the color of your choice, and then adjust the fill opacity percentage value (for example, 35).

Background images and gradients are supported on Row, Column, Wrapper and Hero layers in Emailify preview and HTML-rendered exports. If you're exporting raw mjml or loops output, Column background image attributes are still omitted there.

Setting a solid fallback color behind your background image ​

If you want to add a custom fallback color to show up behind your background image (which will be visible either when the image is loading for the user in their email client later, or if their email client initially blocks image content from rendering), you can do this by adding an extra solid color to your background image Row, Column, Wrapper or Hero layer's Fills by clicking the + icon button, setting the fill color you've chosen to be 100% opacity, and then dragging it to the bottom of the Fills list (underneath your background image fill).