Images

Inserting Images

Inserting images in Markdown is simple and easy. You need to use a combination of square brackets and parentheses. The square brackets contain the alt text for the image, while the parentheses contain the image URL.

If the image is stored on your local computer, you can use a relative path to the image instead of a URL. Alternate text (alt text) is displayed when the image can't be shown or for the visually impaired. It's fine to leave this blank, but the brackets are required. Make sure there are no spaces between the brackets.

![alt text](imageurl)
for example:
![beach](../images/beach)

img


Resizing Images

You can resize an image by using width and height keyword options. We also support the shorthand options w and h. Usually, it's helpful to use these.

![width:500px height:300px](../images/beach)
or
![w:500px h:300px](../images/beach)

img


Adding Background Images

To add a background image to your presentation, you can use the ![bg] directive followed by the path to your image. This will set the image as the background of the slide. Let's take a look at an example. Note that you can use any image file format supported by your browser, including PNG, GIF, and SVG, among others.

![bg](image/url)

for example:

```
testing bg
```
![bg](https://picsum.photos/id/1021/600/337)

img


Using Multiple Background Images

In addition to setting a single background image for your entire presentation with the ![bg] directive, Marpit also allows you to use multiple background images on a per-slide basis using the bg directive. These images will arrange in a horizontal row.

![bg](image/url)
![bg](image/url)
![bg](image/url)

img

You may change the alignment direction from horizontal to vertical by using the vertical direction keyword.

![bg vertical](image/url)
![bg](image/url)
![bg](image/url)

img

You can also specify the left or right keyword with the bg directive to make space for the background on the specified side. It has half of the slide size, and the space of the slide content will shrink as well.

![bg left](image/url)

for example:

```
![bg left](image/url)
```
![bg left](../media/samples/forest.jpg)

img

Multiple backgrounds will work well on the specified background side. Marpit can specify the split size for the background by percentage, like left:25% from the slide.

![bg left:25%](image/url)

for example:

```
![bg left:25%](image/url)
```
![bg left:25%](../media/samples/forest.jpg)

img