You can add a background image to any Row, Column, Wrapper or Hero layer in your email design by clicking on 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 (eg. 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'd like 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).