On September 25th, 2024, we released v2 of the Apps SDK. To learn what’s new and how to upgrade, see Migration FAQ and Migration guide.

setCurrentPageBackground

API reference for the setCurrentPageBackground method.
This version of the API is deprecated. This version will soon be unsupported. You should use a stable version of the API in your app.

Sets the background of the current page, which is either the page the user has explicitly selected or the page that occupies the majority of the viewport.

Usage

Setting a background color

import { setCurrentPageBackground } from "@canva/design";
setCurrentPageBackground({
color: "#ff0099",
});
TS

Setting a background image

import { setCurrentPageBackground } from "@canva/design";
import { upload } from "@canva/asset";
const image = await upload({
type: "IMAGE",
mimeType: "image/jpeg",
url: "https://www.canva.dev/example-assets/image-import/image.jpg",
thumbnailUrl:
"https://www.canva.dev/example-assets/image-import/thumbnail.jpg",
});
setCurrentPageBackground({
asset: {
type: "IMAGE",
ref: image.ref,
},
});
TS

Setting a background video

import { setCurrentPageBackground } from "@canva/design";
import { upload } from "@canva/asset";
const video = await upload({
type: "VIDEO",
mimeType: "video/mp4",
url: "https://www.canva.dev/example-assets/video-import/video.mp4",
thumbnailImageUrl:
"https://www.canva.dev/example-assets/video-import/thumbnail-image.jpg",
thumbnailVideoUrl:
"https://www.canva.dev/example-assets/video-import/thumbnail-video.mp4",
});
setCurrentPageBackground({
asset: {
type: "VIDEO",
ref: video.ref,
},
});
TS

Parameters

The expected parameters depend on the type of background:

To set an asset as the current page background, such as an image or video, set the following parameters:

optionsobject
REQUIRED

The options for setting the current page background.

options.assetobject
REQUIRED

The asset to set as the current page background.

options.asset.typestring
REQUIRED

The type of asset.

The available options include:

  • "IMAGE"
  • "VIDEO"
options.asset.refstring
REQUIRED

A unique identifier that points to an asset, such as an image or video, in Canva's backend.

To set a color as the current page background, set the following parameters:

optionsobject
REQUIRED

The options for setting the current page background.

options.colorstring
REQUIRED

The color to set as the current page background, as a hex code.

The hex code must include all six characters and be prefixed with a # symbol (e.g., #ff0099).

Returns

Promise<void>