How to align image bellow text header in Marp or Marpit

[wakatana]

Hello. 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?

Thank you very much

[yhatt]

Don't use "bg" keyword in an image. It is only for slide background. Use a standard Markdown inline image for layout, with a bit of styles.

## Heading

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

<style scoped>
/* Styling for centering (required in default theme) */
h2, p {
  text-align: center;
}
</style>

Recommend to set an image height through h:xxx, to prevent sticking out from the edge of slide.

[wakatana]

Thank you very much. If I understand correct then you are using scoped style https://marpit.marp.app/theme-css?id=scoped-style which must be defined for each slide? And also you resize image height to 480. I would like to ask if it is possible to somehow set image height e.g. to 80% of slide height, so I do not need to put exact value to image tag?

[yhatt]

The scoped style is just a one of solutions, and you can also define the custom layout class to the global CSS or your custom theme CSS.

section.image > * {
  text-align: center;
}
section.image img {
  height: 480px;
}

<!-- _class: image -->

## Heading

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

You can also try to set height: 80% to image via CSS. However, it will calculate based on an intrinsic size of the parent element of image (<p>), not the slide size. Thus, a percentage value does not brings the result you've expected. That's reason why Marpit does not support a percentage in an image syntax.

2021-09-19.14.53.05.mov

[Juanvvc]

You can also use a "custom center directive", either in your custom CSS or in the style section at the beginning

<style>
img[alt~="center"] {
    display: block;
    margin: 0 auto;
}
</style>

## Other slides

...

## Heading

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