---
title: "changeBackground Method"
canonical: https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.objectmodel.product.changebackground.htm
archived: true
applies_to:
  - product: "Customer's Canvas On-Premises"
  - product: "Design Editor"
    versions: ["6.15.0", "6.x (may differ)"]
---

**You’re viewing outdated documentation.** [View the latest Customer’s Canvas On-Premises documentation](https://customerscanvas.com/docs/on-premises/).

# changeBackground Method

**Applies to:** Customer's Canvas On-Premises; Design Editor 6.15.0, 6.x (may differ) · **Archived documentation**
 
### Callable
 
- changeBackground(surfaces:  [Surface](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.objectmodel.surface.htm.md) [], data:  ImageMetaData  |  string ) :  Promise < ShapeItem [] >

- Sets an image or a plain color to the background.
  
 - example
     - ```
    changeBackground = async () => {
    
        // Get the product loaded into the editor.
        let product = await editor.getProduct();
    
        // Get metadata of an image in the public gallery.
        const metaData = await editor.configuration.getImageMetadata("public:backgrounds/azure.jpg");
    
        // Apply the image to the background of the first surface.
        product.changeBackground([product.surfaces[0]], metaData);
    
        // Apply the color to the background of the second surface.
        product.changeBackground([product.surfaces[1]], "#30C2FF");
    }
    ```

#### Parameters

    - ##### surfaces: [Surface](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.objectmodel.surface.htm.md) [] 
  
        An array of surfaces where the background should be changed.
    - ##### data: ImageMetaData  |  string 
  
        Either an object representing the image metadata or a string representing the color in CCS format (for example: `"DeepSkyBlue"`, `"rgb(48,194,255)"`, `"#30C2FF"`).

#### Returns Promise < ShapeItem [] >
 
    An array of shape items.