setCurrentPageBackground
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",});
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:
To set an asset as the current page background, such as an image or video, set the following parameters:
options
object
The options for setting the current page background.
options.asset
object
The asset to set as the current page background.
options.asset.type
string
The type of asset.
The available options include:
"IMAGE"
"VIDEO"
options.asset.ref
string
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:
options
object
The options for setting the current page background.
options.color
string
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>