Images and text

Sample images

The images in this documentation are abstract patterns generated for illustration. Replace them with your own local files.

Image beside the text

Class	Image position	Image share
image-text	Left	50%
text-image	Right	50%
image-text-80	Left	80%
text-image-80	Right	80%

The available suffixes are 10 to 90, in steps of 10. The number always refers to the image, whichever side it is on. It applies to the width remaining after the margins and the 28-pixel gap between the areas.

The expected structure: an image alone in its paragraph and a single > text block, which can contain several elements.

<!-- _class: content text-image-60 with-title with-legend fit small -->

# Architecture

![](architecture.png)

> ## How it works
>
> The system receives a request and prepares a response.
>
> - An input
> - Processing

Source: internal documentation (example).

Placement comes from the classes: to move the image to the left, change text-image-60 to image-text-60, without moving the image in the Markdown.

<!-- _class: content image-text-40 with-title cards -->

# In the field

![](equipe.png)

> ## What we saw
>
> Motivated teams and tools to simplify.

One image, one text block

Several text blocks or several images are assigned to the same cells and may overlap. A 90% ratio leaves only 10% for the text: reserve it for a short annotation.

A large image

You need to distinguish the composition, which defines the image area, from the fit, which defines how the image fills that area.

Class	Category	Effect
image-fit	Composition	A large image in the content area, with the margins
image-full	Composition	An image across the whole slide, behind the title and the caption
fit	Fit	Keeps the whole image, with empty space if needed
bg	Fit	Fills the frame and crops the excess (centered crop)

fit is the default behavior, including for image-full.

image-fit

<!-- _class: content image-fit fit with-title -->

# Overview

![](visuel.png)

image-full bg

To fill the slide edge to edge, write image-full bg. The title and the caption get a solid background to stay readable.

<!-- _class: content image-full bg with-title with-legend -->

# The worksite

![](chantier.png)

Illustrative image.

bg is not ![bg](…)

The language's bg class has nothing to do with Marp's native ![bg](image.png) syntax. For these compositions, use ![](image.png). Marp's native syntax reserves space on its own and is not handled by this theme as an equivalent mode.

There is no focal point option in this version: cropping stays centered.