You can add a background image to any Row, Wrapper or Hero layer in your email design by, you can click on the layer in Figma and then add (by clicking the + icon next to the Fill panel in the layer’s Figma properties) and set the Image fill for that layer, which 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).
Please note that background images are not supported on Column layers, you can add a regular image layer inside of any Column layer to add inline image content it it, but if you need to use a background image fill, you’ll need to apply that to either a Row, Wrapper or Hero layer instead.

​
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, 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).

Was this page helpful?

Background ColorsAdjust Layout Padding