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.

Was this page helpful?

Background ColorsAdjust Layout Padding