> For the complete documentation index, see [llms.txt](https://docs.scaleflex.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.scaleflex.com/studio/template-builder/building-a-template/image-layers.md).

# Image layers

An image layer places a picture on the canvas: a packshot, a lifestyle shot, a logo. The picture can be fixed, or it can be a variable so that every rendered image carries a different one.

### Adding an image

1. Click the image tool in the toolbar under the canvas.
2. Pick an image in the asset picker.

The layer is placed in the middle of the canvas, scaled to fit comfortably inside it, and keeps the picture's proportions. Cancelling the picker cancels the layer.

### Choosing the image

With an image layer selected, the properties panel opens with a **Source** section showing a thumbnail of the current picture.

| Control                                | What it does                                                                                                                                                                |
| -------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Image URL**                          | The address of the picture. Paste one, or use **Choose image** beside it to pick from your library                                                                          |
| **Preview image**                      | The same field, renamed when a variable drives this layer. What you put here is what the builder shows you; exports and variations use the variable's default value instead |
| **Require background-removed version** | Renders the background-removed version of whatever picture this layer is given. See below                                                                                   |

<div align="left"><figure><img src="https://2536208400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqsq2dR7Fjagf5eTifWZx%2Fuploads%2FQXp4cNMgqVxzmlRGrj50%2F14-image-source-block.png?alt=media&amp;token=d1044234-d7dc-4b50-bc94-0920c39550db" alt="" width="257"><figcaption></figcaption></figure></div>

### Requiring the background-removed version

Some designs only work with a cut-out: the product sits on the template's own background, and the picture's own studio background would ruin it. The **Require background-removed version** checkbox at the bottom of the **Source** section makes that a rule of the layer instead of something to remember every time a picture is chosen.

With it on, the layer renders the background-removed version of whatever picture it is given, both the one you pick here and the one someone substitutes in a variation. The canvas and the thumbnail in the panel show the cut-out too, so you design against what the template will output.

The checkbox is on every image layer, whether the picture is fixed or comes from a variable. On a variable layer it is the only way to guarantee a cut-out, since which picture gets used is not known until the template is filled in.

Background-removed versions are created in the DAM, on the asset itself: choose **Remove background** on the asset, and the result appears in its [Variations](/digital-asset-management-dam/library/assets/asset-details-window/asset-information-tabs/variations.md) tab, marked **Removed background**. This checkbox asks for that version, it does not make one.

#### Pictures that do not have one

The requirement is strict. A picture with no background-removed version does not render at all, and the original is never used in its place.

That is deliberate. A product image published with its original background still attached is a mistake you cannot take back, while an image that did not render is one you can still fix.

You are told as early as it can be known:

| Where                 | What you see                                                                                                                             |
| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| The properties panel  | **This layer's current image has no background-removed version and will not render.** appears under the checkbox as soon as you check it |
| The canvas            | The layer is outlined in red and reads **No background-removed version available for this image.** rather than going blank               |
| The variation builder | A warning against that picture's field, before the variation is saved. See [Variations](/studio/template-builder/variations.md)          |

Checking the box is still allowed while that warning shows, because the picture in the layer today is not the picture a variation will use.

{% hint style="info" %}
**Nothing has to be redone once the version exists.** The layer asks for the background-removed version at the moment the image is requested, so the template and its variations start rendering on their own as soon as the asset has one.
{% endhint %}

Clearing the checkbox returns the layer to the original picture. The canvas follows at once, and the saved template when you next save it. A variation saved while the requirement was on keeps it until that variation is opened and saved again.

### How the image fills its box

The **Image** section controls the fit between the picture and the layer's box.

| **Resize** | What happens                                                                                       |
| ---------- | -------------------------------------------------------------------------------------------------- |
| **fit**    | The whole picture is shown inside the box, keeping its proportions. Any leftover space stays empty |
| **crop**   | The box is filled completely, keeping proportions, and whatever falls outside is cut off           |
| **cover**  | The picture is stretched to fill the box exactly, ignoring its proportions                         |

### Focus area

**Focus area** is a 3 x 3 grid that decides which part of the picture stays in view when the box and the picture do not have the same shape. With **crop** it picks the part that survives the crop; with **fit** it decides where the picture sits in the leftover space.

The grid is hidden in **cover** mode, where the picture is stretched to fill the box and there is nothing left to position.

<div align="left"><figure><img src="https://2536208400-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqsq2dR7Fjagf5eTifWZx%2Fuploads%2FU0N9IXahZC6YK3jlJoKd%2F15-resize-and-focus-area.png?alt=media&amp;token=93d6f8fe-5356-4dcb-b3c0-432b012ebfb4" alt="" width="248"><figcaption></figcaption></figure></div>

### Replacing an image

Open the picker again from the **Source** section, or paste a different URL. The layer keeps its position and size in every layout, so swapping a product shot is a single action.

{% hint style="info" %}
An image layer is also what an **Asset metadata** variable reads from: the text comes from the metadata of the picture in that layer. Add the image layer first, then the variable. See [Variables](/studio/template-builder/variables.md).
{% endhint %}

### Where to go next

* [Variables](/studio/template-builder/variables.md) to swap the picture per rendered image.
* [Layers](/studio/template-builder/building-a-template/layers.md) for position, size, rotation and opacity.