yhatt/marp

background image position

mpeaton37 opened this issue · 8 comments

mpeaton37 commented

I am attempting to use a background image to fill an entire slide. This seems to be commonly done in presentations, so I would expect the following to default to, or have the option for full fill.

bg Seems to crop by 50% and left justify by default.

ansiblejunky commented

You can use an override style if you cannot get it working with the existing themes. Check out my blog on custom themes for Marp.
https://www.ansiblejunky.com/blog/custom-themes-with-marp/

yhatt commented

We're making a clean sweep of piled up issues. Filling entire slide in center is already a default behavior of background image ![bg]().

Certainly the inline image ![]() might see like to be cropped and justified to left, but it have to contain "bg" keyword in alt to use as background.

ansiblejunky commented

Good to know, thanks for the tip.

ansiblejunky commented

It appears when I use ![bg]() just after the --- slide separator, the background uses the image but it has a low opacity. I assume you have some CSS in your themes that is doing that. I would prefer this to be controlled by the markdown author instead. Any way to control this in the current version?

yhatt commented

Use ![bg original](). You can disable the opacity filter for background image.

Originally this keyword had added to work as same as Deckset. However, it has caused confusing as you pointed out. In the future version, Marp Next, opacity filter would become to be optional: ![bg opacity]()

  • 👍1
yubaoliu commented

How to set background image bg for all the slides rather than the current slide. Currently, I need to add this sentence for each slide. Thanks

yhatt commented

@yubaoliu Use custom styling.

<style>
.slide {
  background: #fff url(bg-image.jpg) no-repeat center center;
  background-size: cover;
}
</style>

# Slide contents

Marp Next (Marpit) has already supported setting CSS background by backgroundImage directive. Use it in front matter to set background for all slides:

---
backgroundImage: url(bg-image.jpg)
---

# Slide contents

The custom styling still can use in Marp Next.

<style>
section {
  background: #fff url(bg-image.jpg) no-repeat center center;
  background-size: cover;
}
</style>

# Slide contents
yubaoliu commented

Thanks, I tried this. It works after I remove <!-- $theme: gaia -->. It seems like I need to use a custom theme.