setCurrentPageBackground

API reference for the setCurrentPageBackground method.

Sets the background of the current page. The current page is either the page the user has explicitly selected or the page that takes up the majority of the viewport.

Usage

Setting a background color

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

setCurrentPageBackground({
  color: "#ff0099",
});

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,
  },
});

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,
  },
});

Parameters

The expected parameters depend on the type of background:

Asset
Color

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.

Returns

Promise<void>