# Use images in a template

Choose an Asset image, display it in HTML, or use it as a page, header, or footer background.

An image can be a fixed part of the design, such as a logo, or a page background. Choose an image stored in the project’s **Assets**, or use an HTTPS URL for an image hosted elsewhere.

Assets keeps reusable images in the project and lets you select them directly from the editor.

## 1. Select an image from Assets

[Upload an image to Assets](/docs/assets/manage/) in the project. In the editor, select the part that needs the image, open **Props**, add a prop, and choose **Asset**. Select **Select image**, open the folder, and choose the file.

For example, call the prop `logo`. The app stores a reference to the selected project file, so you do not need to paste a download URL into the template.

Choosing a different image for the prop updates HTML locations using that same prop.

<figure class="doc-sim data-assets-illustration" aria-label="Asset prop → Select image → choose a project image">
<div class="sim-stage"><div class="sim-panel"><div class="ds-head"><strong>Props</strong></div><div class="ds-node"><strong>logo</strong><span class="ds-type">Asset <svg class="sim-chevron" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="m4 6 4 4 4-4" /></svg></span></div><div class="ds-pad"><span class="sim-control sim-focus">▧ Select image</span></div><div class="ds-asset-grid"><div class="ds-asset sim-focus"><div class="ds-thumb"><span>T</span></div><strong>logo.png</strong><small>PNG</small></div><div class="ds-asset"><div class="ds-thumb"><span>T</span></div><strong>cover.jpg</strong><small>JPG</small></div></div></div></div>
<figcaption>Asset prop → Select image → choose a project image</figcaption>
</figure>

## 2. Display the image in HTML

In the section containing the `logo` prop, use:

```handlebars
<img src="{{ props.logo }}" alt="Logo" class="logo" />
```

For a **Global** logo prop, use `{{ global.props.logo }}`. Set its dimensions in the section’s CSS:

```css
.logo {
  width: 120px;
  height: 48px;
  object-fit: contain;
}
```

`contain` fits the complete image inside the box; `cover` fills the box and may crop excess content. Choose the behavior you want rather than stretching the image to both dimensions.

<figure class="doc-sim data-assets-illustration" aria-label="HTML → props.logo → image">
<div class="sim-stage"><div class="ds-code sim-focus"><code>&lt;img src="{{ props.logo }}"</code><code>     alt="Logo" class="logo" /&gt;</code></div><div class="ds-image-preview"><div class="ds-logo">Tembuilder</div><small>props.logo</small></div></div>
<figcaption>HTML → props.logo → image</figcaption>
</figure>

## 3. Use an image as a background

For a shared background, open **Global → Config → Page background** and choose an image. For a single page, select it, open **Config → Background → Page background**, and enable its own background.

**Size**, **Position**, and **Repeat** control how the image fills the background. For example, Cover fills the area, Center places it in the middle, and No repeat prevents tiling.

Headers and footers have their own Background settings in Config. See [Headers and footers](/docs/editor/header-footer/) for those areas.

<figure class="doc-sim data-assets-illustration" aria-label="Background → Image → choose sizing and position">
<div class="sim-stage"><div class="sim-panel"><div class="ds-head"><strong>Page background</strong></div><div class="ds-setting"><span>Image</span><span class="sim-control sim-focus">Select image</span></div><div class="ds-rows"><div><span>Size</span><small>Cover</small></div><div><span>Position</span><small>Center</small></div><div><span>Repeat</span><small>No repeat</small></div></div></div><div class="ds-image-options"><span>contain</span><span>cover</span></div></div>
<figcaption>Background → Image → choose sizing and position</figcaption>
</figure>

## 4. Use an external image URL

You can put an HTTPS URL directly in `src` when the workspace permits external images. It must return a **public image file**, rather than a web page containing an image or a URL requiring sign-in.

```html
<img src="https://example.com/images/banner.png" alt="" />
```

External image URLs accept **PNG, JPEG, WebP, GIF, and AVIF**. Remote **SVG is not supported**; upload SVG through Assets and select it with an Asset prop. URLs must use HTTPS on port **443**, have no embedded username/password, and resolve to public addresses; redirects are checked too.

Limits per render: **5 MiB per image**, **30 MiB total**, **100 image requests**, and **10 seconds per fetch including redirects**. A public URL can still fail if its format, size, or response violates these limits. On plans allowing external images, fetch failures fail the render rather than silently omit the image.

If an image works in a signed-in browser but is missing from a PDF, check whether its URL depends on a cookie or session. The renderer needs to fetch it independently of your browser.

For images already in Assets, use the Asset picker instead of copying a preview URL. When resource access is unavailable, the app shows the relevant message; see [Plan limits](/docs/plans/limits/) for workspace access details.

<figure class="doc-sim data-assets-illustration" aria-label="Use a URL that points directly to a public image file">
<div class="sim-stage"><div class="ds-url-box sim-focus"><small>HTTPS image URL</small><code>https://example.com/images/banner.png</code></div><div class="ds-source-path"><span>URL</span><span>→</span><span>Image file</span><span>→</span><span>PDF</span></div></div>
<figcaption>Use a URL that points directly to a public image file</figcaption>
</figure>