Background

A JSX email component for background images in your Email template

pnpm

aube

bun

npm

yarn

pnpm add jsx-email

Usage

Add the background component to your email template.

import { Body, Column, Html, Section } from 'jsx-email';

const Email = () => {
  return (
    <Html lang="en">
      <Body>
        <Background src="link-to-image" bgColor="#FFFFFF" width={600}>
          <Row>
            <Column>Content goes here</Column>
          </Row>
        </Background>
      </Body>
    </Html>
  );
};

Component Props

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

src: string;

The path to the image

bgColor?: string;

The hex code that represents the fallback background-color incase the image doesn’t load

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

A string that represents the value of background-repeat. Default value is no-repeat

height?: number;

The height of the container in pixels

width?: number;

The width of the container in pixels