Manipulating Positions of Multiple Images in Slides + Recurring Image

[IsaacTheo]

Hi all,

First of all, I think this is a very powerful tool for creating presentations and I look forward to watching how it will develop.

I have two images I want to put on a slide. One of them is a small logo image that will be in the corner of every slide after the first one. My first question is how can I put both images on a slide and control their positions independently? The image files are local and I am using VSCode in Linux Mint OS. The code attached below returns this:

which is almost what I want except the image in the last line of the attached code (which I commented the line out for) does not render properly. When I uncomment the line, the other image in the second slide renders but the logo disappears. The first slide still seems to remain intact though. Here is the code:

---
marp: true
title: POD Analysis of Thin Flat Plate at Re=150
math: katex
---
![bg](UCalgary_Zoom_background_01.png)


$$
\begin{gather}
    \int (x^2 + 1) dx = \frac{x^3}{3} + x + C \qquad \\
\end{gather}
$$
<!-- define-math-global-directive -->
---
<!-- paginate: true -->

![w:80 h:80](UC-vert-rgb.png)
<style scoped>
p {
  /* Unset default placing inherited from the built-in theme */
  position: absolute;

  /* Place to right-bottom */
  right: 20px;
  top: 20px;
}
</style>



<!-- ![meanvecAB](meanvecAB.png) -->

The other issue is that I cannot find how to get the logo image to reoccur. I saw some people were turning it into headers or footers but is this an ideal option?

I look forward to hearing from you.

[yhatt]

As a basic thing, Markdown will create implicit pararaphs <p> to every separated lines. So styling just a p may break other contents as you've tried.

Changing p selector to p:has(img) may work, but my best practice is using CSS background-image for the slide container <section>.

Using background images is also important for preserving text semantics in Markdown, and making better documents that both of Markdown and its output are in consideration of accessibility.

---
_class: title
---

<!-- Global style -->
<style>
section {
  /* Note: Relative path is resolved from a directory that Markdown/HTML is located, not CSS */
  background: url('./meanvecAB.png') no-repeat right 20px top 20px / 80px 80px;
}

section.title {
  background: url('./UCalgary_Zoom_background_01.png') no-repeat center center / cover;
}
</style>

Title

---

<!-- paginate: true -->

Contents

Don't forget that you can extract global style into your custom theme CSS at any time. If extracted, Markdown should be extremely simple: including only slide contents, no extra decorative things.

[IsaacTheo]

Thank you Yuki!