---
title: Image
description: Full background or foreground image layout
---

# Image Layout

The `image` layout displays images either as full-screen backgrounds or as foreground elements with content above.

## When to Use

- Full-screen visual slides
- Explaining diagrams or screenshots
- Visual breaks in presentation
- Architectural overviews

## Parameters

| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| `imageSrc` | string | - | Image URL or path |
| `imageScale` | string | `'70%'` | Image size (foreground mode) |
| `imageAlign` | string | `'center'` | Image alignment |
| `imageBackgroundMode` | boolean | `true` | Background (true) or foreground (false) |
| `logo` | boolean | `false` | Show/hide logo |

## Background Mode

```markdown
---
layout: image
imageSrc: https://example.com/hero.jpg
imageBackgroundMode: true
imageScale: 100%
---

# Text Over Image

Content overlays the background
```

## Foreground Mode

```markdown
---
layout: image
imageSrc: /diagram.png
imageBackgroundMode: false
imageScale: 80%
imageAlign: center
---

# Architecture Diagram

Content above, image below
```