Backgrounds

The background fills the whole page, behind every other element. It is a solid color, a gradient, a photo, or a blurred copy of a picture on the page. Each page of a design has its own background. A new page is white.

SetupCopy Anchor Link

Colors, gradients, uploaded photos and blurred copies work with no setup. The Unsplash photo search needs your Unsplash key, and Generate background needs an ai setting that serves pictures:

import { ImageEditor } from '@layermetry/media-editor/react';

export default function App() {
  return (
    <div style={{ position: 'fixed', inset: 0 }}>
      <ImageEditor
        licenseKey="YOUR_LICENSE_KEY"
        onClose={() => console.log('The editor was closed')}
        // Background photos: Unsplash, through your own server.
        stockMediaApis={{
          unsplash: { endpointUrl: 'https://api.example.com/unsplash', showAttribution: true },
        }}
      />
    </div>
  );
}

Open the Background panel in the tool rail. At the top is Generate background, when your ai setting serves pictures. Below it are three tabs: Solid Color, Gradient, and Image.

Solid colorCopy Anchor Link

On the Solid Color tab, a click on one of the 16 Preset Colors fills the page at once. For another color, choose it under Custom Color and press Apply Color.

The presets are white, black, two grays, and twelve bright colors, from red (#ef4444) to purple (#a855f7).

The color stays with the page when the user changes the background to a gradient, a photo, or a blurred copy. It is the fallback color: the page and the exported file show it whenever the background cannot be drawn. That happens while a photo has not loaded, when the colors of a gradient cannot be read, and when the picture of a blurred copy is deleted. A new page starts with white.

GradientCopy Anchor Link

On the Gradient tab, a click on one of the 8 Gradient Presets fills the page with a gradient. For your own gradient, choose the Start, Middle, and End colors under Custom Gradient, and press Apply Custom Gradient.

View full size

Under the colors, Direction says which way the gradient runs: → (left to right, the default), ↓ (top to bottom), ↘ and ↗ (the two diagonals). For any other direction, type a number of degrees from 0 to 359 and press Enter.

ImageCopy Anchor Link

The Image tab puts a picture behind the page. It has, from top to bottom:

• From this design: one tile for each picture on the page. Press a tile to make the background a blurred, darkened copy of that picture. See Blurred background.
• Upload a picture: choose a picture file from the computer.
• The Unsplash search, when Unsplash is connected. It starts with the search "backgrounds". The photographer's name is shown on each photo, as Unsplash requires. Load More shows the next 15 photos.
• Blur and Darken, whenever the background is a photo or a blurred copy.

A photo fills the whole page. It keeps its proportions, it is centred, and the parts that do not fit are cut off equally from both sides.

Blur softens the photo, from 0 (sharp) to 40 pixels. Darken puts black over it, from 0 to 100 %. Both help text on top stay readable. The page changes once, when the slider is let go.

View full size

Blurred backgroundCopy Anchor Link

A blurred background fills the page with a soft, darkened copy of a picture on the page. Put a picture on the page first, then either press its tile under From this design on the Image tab, or right-click the picture and choose Use as blurred background.

A new blurred copy starts at Blur 20 pixels on a page 1080 pixels on its short side (the number follows the short side, from 0 to at most 40) and Darken 30 %. If the background was already a photo or a blurred copy, its own Blur and Darken are kept. Adjust both with the sliders. When the page is resized with Scale, the blur grows or shrinks with the page's short side.

If the copied picture is deleted, the background shows its fallback color (see Solid color).

Generate backgroundCopy Anchor Link

Press Generate background at the top of the panel, describe the picture, and press Generate. Choose a result and press Set as background. It becomes the background of the page.

A host that shows AI pictures in panels shows this control too. To remove it, leave 'panel' out of ui.generative.actions.image.surfaces. That also removes the generate control from the Upload panel.

ConfigurationCopy Anchor Link

To leave the background out of an exported PNG, tick Transparent background in the export panel. See Transparent background.

EventsCopy Anchor Link

The background has no events of its own. It is part of the design, and it reaches you in the exported file through onExport. See Events.

TroubleshootingCopy Anchor Link

Additional resourcesCopy Anchor Link