Text and image side-by-side

[hacker-jerry]

I want to place the image on the left side and the text on the right side, but so far I have only found the method of wrapping the text by adding a div, which destroys the integrity of the md file, and I want to find a method that has as little impact as possible on the original document, such as using some kind of syntax for column separation.

[lyazide]

I have the same concern. Get the text over the background with local directive:
here is my code so far:

---
marp: false
theme: default
transition: fade
size: 16:9
headingDivider:
paginate: true

---
<!-- backgroundImage: url('image.jpg') -->
<!-- backgroundSize: contain -->
<!-- backgroundPosition: left -->



# Titre de la diapositive

## Titre 2
- content1
- content2
- content3

[yhatt]

Marp (Marpit framework) has already supported split backgrounds, that was inspired from Deckset's split slides.

![bg left](https://picsum.photos/720?image=29)

# Split backgrounds

The space of a slide content will shrink to the right side.

[lyazide]

That work. Any way to add element : text and pictures over the left backgroud?

[yhatt]

➡️ #49

[hacker-jerry]

Sorry I may not be clear, I enriched the header element by adding an underline, but when the image is set to bg, the underline is obscured by the image on the right. It should be like the red line.

Here is code for my header:after,

header::after {
  content: '';
  position: absolute;
  width: 1200px;
  height: 3px;
  background-color: #892019;
  left: 0;
  right: 100px;
  bottom: 0;
  z-index: 99999;
}

[yhatt]

![bg]() makes a reserved area for the image to the one side of slide, and Markdown contents cannot make influence with the reserved area. A <header> element generated by header directive will become a part of Markdown contents so it will be cropped by the edge of Markdown contents.

If you really want to put the content over a background image made by ![bg](), you can use section::before selector instead. In Marpit, the content of ::before pseudo-element for the slide container section is meaning to make a layer over the whole of a slide page. Please refer to https://github.com/orgs/marp-team/discussions/49#discussioncomment-146185.

[hacker-jerry]

thanks a lot!