Images/Svgs from custom theme css are not handled properly in pdf export

[hofbi]

Problem Description

Exporting slides to pdf results in missing or wrong displayed (location and size) images.

• This happens just for images which are specified in the theme.css. Images which are directly used in markdown work as expected. I use background images in the css to properly handle light and dark theme of my slides
• This happens only in the pdf export. For live serving and html generation everything works fine

Steps to reproduce

1. Set a background image in the custom theme css file, e.g.

section
{
  background-color: #fff;
  color: #000;
  background-image: url('path_to_the_image');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: right 40px top 40px;
  background-size: 8%;
}

2. Export
   1. PDF to reproduce the error
   2. HTML to see the expected behavior

[yhatt]

Already reported similar issue in #293 and marp-team/marp-vscode#175 and have patched into the latest Marp CLI v0.22.0 (#294). Try again with the latest version.

[hofbi]

I am using the docker image with this version information: @marp-team/marp-cli v0.22.0 (w/ @marp-team/marp-core v1.3.0), so it should be arlready the latest verison.

I checked both issues you mention above. The difference is as I mentioned in the issue description that all images (including the background images) work as intended. Even for the pdf export. The issue happens when setting a background image in the .css theme. In this case the image is either displayed in a wrong size or totally missing. This only happens for the pdf export, not for the html case.

[yhatt]

OK. I suppose background-attachment: fixed is affecting adversely for PDF export. Each slides (section elements) are not the real viewport so we cannot predict where to place the background image if set fixed.

---
paginate: true
---

---

---

<style>
section {
  background-image: url('https://marp.app/assets/hero-background.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
}
</style>

background-attachment: fixed	background-attachment: scroll (default)

I think there is no reason to use background-attachment: fixed.

[hofbi]

Ok thank you very much. This solved the issue.