Skip navigation

Skip to main content

API reference
Intents: design
API reference

setCurrentPageBackground

API reference for the setCurrentPageBackground method.
This version of the API is a preview. Preview APIs are unstable and may change without warning. You can't release public apps using this API until it's stable.

Updates the background of the user's current page. The background can be a solid color, an image or a video.

Usage

Set background color

import { setCurrentPageBackground } from "@canva/design";
import type { PageBackgroundFill } from "@canva/design";


const background: PageBackgroundFill = {
  color: '#F5F5F5',
};


await setCurrentPageBackground(background);
TYPESCRIPT

Set background image

import { setCurrentPageBackground } from "@canva/design";
import type { PageBackgroundFill } from "@canva/design";
import type { ImageRef } from "@canva/asset";


const exampleImageRef = "YOUR_IMAGE_REF" as ImageRef;


const background: PageBackgroundFill = {
  asset: {
    type: 'image',
    ref: exampleImageRef,
    altText: { text: 'Background image', decorative: true }
  },
};


await setCurrentPageBackground(background);
TYPESCRIPT

Set background video

import { setCurrentPageBackground } from "@canva/design";
import type { PageBackgroundFill } from "@canva/design";
import type { VideoRef } from "@canva/asset";


const exampleVideoRef = "YOUR_VIDEO_REF" as VideoRef;


const background: PageBackgroundFill = {
  asset: {
    type: 'video',
    ref: exampleVideoRef,
    altText: { text: 'Background video', decorative: true }
  },
};


await setCurrentPageBackground(background);
TYPESCRIPT

Parameters

optsPageBackgroundFill
Required

The appearance of a page's background.

colorstring
Optional

The color of the fill as a hex code.

The hex code must include all six characters and be prefixed with a # symbol.

Example

"#ff0099"
TS
assetobject
Optional

An image or video to use as the fill.

An image asset that fills a path's interior.

typestring
Required

The type of fill.

The only valid value is "image".

refImageRef
Required

A unique identifier that points to an image asset in Canva's backend.

altTextAltText
Optional

A description of the image content.

Use undefined for content with no description.

textstring
Required

The text content.

decorativeboolean | undefined
Required

Indicates where the alternative text should be displayed.

  • If true, the alternative text will only be displayed in the editor.
  • If false, the alternative text will be displayed in the editor and in view-only mode.

A video asset that fills a path's interior.

typestring
Required

The type of fill.

The only valid value is "video".

refVideoRef
Required

A unique identifier that points to a video asset in Canva's backend.

altTextAltText
Optional

A description of the image content.

Use undefined for content with no description.

textstring
Required

The text content.

decorativeboolean | undefined
Required

Indicates where the alternative text should be displayed.

  • If true, the alternative text will only be displayed in the editor.
  • If false, the alternative text will be displayed in the editor and in view-only mode.

Returns

Promise<void>