---
title: "setBackground | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/ui-framework/widgets/design-editor-commands/set-background/"
---

# setBackground

> Allows for replacing a background image of a design opened in the editor. The image can be taken from either a specified URL or the Customer's Canvas public gallery (in this case, the syntax is **public:folder/filename.jpg**).

:::note
You should take care that the background has a correct DPI and dimensions, otherwise, it may distort the design size.
:::

## Params

- `url` - a URL to the image or a path in the Customer's Canvas gallery with the **public:** prefix as explained in [user-info](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/howto/user-info.md).
- `surfaceIndex` - an index of a surface that should be modified (the current surface, if omitted). 
- `autoResize` - if `true`, the background image will be resized to cover the entire design.
- `toTile` - if `true`, the background image will tile the entire design. It is useful for pattern backgrounds. If `false` (by default), the background size will become the product size.

For the complete list of parameters, you can refer to [IDesignEditorDefinitionSetBackground](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-design-editor.IAuWidgetDesignEditor.md#idesigneditordefinitionsetbackground).

## Example

```json
{
    "type": "gallery",
    "name": "bg",
    "params": {
        "items": [...]
    }
},
{
    "type": "design-editor", 
    "name": "design-editor",
    "params": {
        "initial": { ... }, 
        "setBackground": {
            "url": "{{ $['bg']._.url }}"
        }
    }
}
```