Skip to content
JSX email

Background

A JSX email component for background images in your Email template

Install

Install the component from your command line

Terminal window
pnpm add jsx-email

Usage

BackgroundExample.jsx
import { Background, Body, Column, Html, Row, Section } from 'jsx-email';


const Email = () => {
  return (
    <Html lang="en">
      <Body>
        <Background
          src="https://example.com/image.jpg"
          bgColor="#FFFFFF"
          width={600}
        >
          <Row>
            <Column>Content goes here</Column>
          </Row>
        </Background>
      </Body>
    </Html>
  );
};

Props

TypeScript Interface

interface BackgroundProps
  extends Omit<React.ComponentPropsWithoutRef<'td'>, 'height' | 'width' | 'bgcolor'> {
  src: string;
  bgColor?: string;
  bgRepeat?: 'repeat' | 'no-repeat';
  height?: number;
  width?: number;
}

Required Props

src

src: string;

The path to the background image.

Optional Props

bgColor

bgColor?: string;

Fallback background color (hex code) if the image fails to load.

bgRepeat

bgRepeat?: 'repeat' | 'no-repeat';

Background repeat behavior, uses background-repeat. Defaults to no-repeat.

height

height?: number;

Container height in pixels.

width

width?: number;

Container width in pixels.