Appearance

Background ​

A JSX email component for background images in your Email template

Install ​

Install the component from your command line

console
pnpm add jsx-email
pnpm add jsx-email
console
bun add jsx-email
bun add jsx-email
console
npm add jsx-email
npm add jsx-email
console
yarn add jsx-email
yarn add jsx-email

Usage ​

Add the background component to your email template.

jsx
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>
  );
};
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 ​

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

The path to the image

tsx
bgColor?: string;
bgColor?: string;

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

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

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

tsx
height?: number;
height?: number;

The height of the container in pixels

tsx
width?: number;
width?: number;

The width of the container in pixels