---
canonical: https://amplience.com/developers/docs/apis/media-delivery/media-delivery-reference/layers/
title: Layers and text
  interactive: true
description: Composite image and text layers onto an image with Amplience Dynamic Media, using Media Delivery API parameters for layer positioning, anchors, opacity, visibility, and canvas layers.
keywords:
  - Dynamic Media
  - Media Delivery API
  - Dynamic Media layers
  - image overlay
  - text layer
  - roundel
  - canvas layer
audience: Developer
date_published: 2026-07-12
date_modified: 2026-07-27
---

# Layers and text

The Media Delivery API lets you overlay images and text onto a base asset. Layer 0 is always the base and further layers are added on top using indexed parameters, each with its own source, position, anchor, opacity, and visibility.

> **Note: Base URL pattern**
> The parameters on this page are appended to a Dynamic Media image URL. For the URL pattern and how parameters chain together, see the [Media Delivery API guide](https://amplience.com/developers/docs/apis/media-delivery/media-delivery-reference/).

## Layers {#layers}

Layers allow multiple images to be composited together. Layer 0 is always the base image. Additional layers are applied on top using indexed parameters (`layer1`, `layer2`, etc.). Parameters for each layer are enclosed in square brackets `[]`.

```uri
https://cdn.media.amplience.net/i/ampproduct/blue-dress-outside?layer1=[src=/i//exampleRoundel]
```

To apply parameters to the base image itself, address it as `layer0`:

```uri
https://cdn.media.amplience.net/i/ampproduct/blue-dress-outside?layer0=[w=800]&layer1=[src=/i//exampleRoundel&w=150]
```

### `src` - Layer image source {#layer-src}

The URL of the image for the specified layer. Starting the path with `/i//` reuses the account domain from the base URL.

```uri
https://cdn.media.amplience.net/i/ampproduct/woman-in-blue-spotted-dress?layer1=[src=/i//blue-roundel]
```

### `top`, `left`, `bottom`, `right` - Layer position {#layer-position}

Positions a layer relative to the previous layer. By default, layers are positioned in the top-left corner. Values can be pixels or percentages.

Combine with [`anchor`](#anchor) for fine-grained control.

```uri
https://cdn.media.amplience.net/i/ampproduct/woman-in-blue-spotted-dress?layer1=[src=/i//blue-roundel&top=50%&left=50%]
```

### `anchor` - Layer anchor {#anchor}

Specifies which point of the layer aligns to the position coordinates. Use with [`top`, `left`, `bottom`, `right`](#layer-position).

| Value | Description |
|---|---|
| `TL` | Top left |
| `TC` | Top center |
| `TR` | Top right |
| `ML` | Middle left |
| `MC` | Middle center |
| `MR` | Middle right |
| `BL` | Bottom left |
| `BC` | Bottom center |
| `BR` | Bottom right |

```uri
https://cdn.media.amplience.net/i/ampproduct/woman-in-blue-spotted-dress?layer1=[src=/i//blue-roundel&anchor=MC&top=50%&left=50%]
```

### `opacity` - Layer opacity {#opacity}

Sets the transparency of a layer. 0 is fully transparent; 100 is fully opaque.

```uri
https://cdn.media.amplience.net/i/ampproduct/woman-in-blue-spotted-dress?layer1=[src=/i//blue-roundel&opacity=50]
```

### `visible` - Layer visibility {#visible}

Controls whether a layer is rendered. `0` is hidden; `1` is visible. Default is `1`.

```uri
https://cdn.media.amplience.net/i/ampproduct/woman-in-blue-spotted-dress?layer1=[src=/i//blue-roundel&visible=0]
```

### `canvas` - Canvas layer {#canvas}

Creates a blank canvas of the specified dimensions onto which other layers can be drawn. Optionally specify a background colour with `bg`. Default background is white.

Format: `canvas={width},{height}`

```uri
https://cdn.media.amplience.net/i/ampproduct/?layer0=[canvas=700,400&bg=rgb(226,216,202)]&layer1=[src=/i//running-shoe&w=280&anchor=MC&top=50%&left=50%]&layer2=[src=/i//blue-roundel&w=110&anchor=TR&top=24&right=24]
```

## Text layers {#text-layers}

Text can be rendered as a layer on top of an image.

| Parameter | Values | Description |
|---|---|---|
| `text` | string | Text string to render. Use `\n` or `%0A` to insert a line break. |
| `fontSize` | integer (pt) | Font size in points. Default: `10`. |
| `fontFamily` | string | Font family. Default: `Helvetica`. Falls back to Helvetica if the requested font is not installed. |
| `fontStyle` | `normal`, `italic`, `oblique` | Font style. Follows CSS `font-style` rules. |
| `fontWeight` | 100–900 in multiples of 100, `normal`, `bold` | Text weight. `normal` = 400; `bold` = 700. |
| `fontStretch` | `ultra-condensed` … `ultra-expanded` | Widens or narrows text. Follows CSS `font-stretch` rules. |
| `textColor` | hex, `rgb()`, or named colour | Colour of the rendered text. Default: black. |
| `textDecoration` | `underline`, `overline`, `linethrough` | Decoration applied to the text. |
| `textAlign` | `left`, `center`, `right` | Alignment within the text layer (applies when text spans multiple lines). Default: `left`. |

```uri
https://cdn.media.amplience.net/i/ampproduct/women-wearing-denim-small?layer1=[text=New%20denim%0AShop%20now&fontSize=48&textColor=white&textAlign=center&fontWeight=400]
```