How to align image below text header in Marp or Marpit

Question

I'm using Marpit via VScode. Here is mi minimum working example:

---
marp: true
---

This should go in to the header and picture should be bellow it, but right now it is the middle of the picture

![bg contain](https://csgeekshub.com/wp-content/uploads/2020/07/C-Program-compilation-steps-and-process.jpg)

Problem with this code is that it produces slide where text and images are aligned in to the center as it is seen on following picture:

I would like to have text as an Header rather than crossing image.

How can I achieve this?

Answer 1

In Marpit you have an image syntax that enables basic image modification. In many cases, it is suitable to scale an image rather than putting it to the background. For headlines you typically use leading hashtags. Consider the following

---
marp: true
theme: default
style: |
    img[alt~="center"] {
      display: block;
      margin: 0 auto;
    }
---

## A Beautiful Headline

![w:500 center](https://csgeekshub.com/wp-content/uploads/2020/07/C-Program-compilation-steps-and-process.jpg)

where I added center to horizontally align the image, which yields this slide:

It is a matter of taste, but I tend to prefer the following arrangement with justify-content to position headlines at the top

---
marp: true
theme: default
style: |
    section{
      justify-content: flex-start;
    }
---

## A Beautiful Headline

- some valid point
- another interesting fact
- even more convincing

![bg right:50% w:500](https://csgeekshub.com/wp-content/uploads/2020/07/C-Program-compilation-steps-and-process.jpg)

as it leaves space for informative text as seen below