hakimel / reveal.js

The HTML Presentation Framework
https://revealjs.com
MIT License
67.91k stars 16.65k forks source link

Parallax Background not working on pdf export #2431

Open Echsecutor opened 5 years ago

Echsecutor commented 5 years ago

When Using a Parallax Background with height larger than the slides height, it is cropped as expected in HTML mode. But in print-pdf mode, the full picture is tiled, which means that the background does not fit to the pages.

Minimal Example: Starting from https://github.com/hakimel/reveal.js/releases/tag/3.8.0 adding a few slides and large background image:

        <div class="reveal">
            <div class="slides">
              <section >Slide 1</section>
              <section >Slide 2</section>
              <section >Slide 3</section>
              <section >Slide 4</section>
              <section >Slide 5</section>
              <section >Slide 6</section>
            </div>
        </div>

        <script src="js/reveal.js"></script>

        <script>
            // More info about config & dependencies:
            // - https://github.com/hakimel/reveal.js#configuration
            // - https://github.com/hakimel/reveal.js#dependencies
          Reveal.initialize({
                       parallaxBackgroundImage: 'bg.jpg',
           parallaxBackgroundSize: '3200px 2133px',

           parallaxBackgroundHorizontal: 300,
                dependencies: [
                    { src: 'plugin/markdown/marked.js' },
                    { src: 'plugin/markdown/markdown.js' },
                    { src: 'plugin/notes/notes.js', async: true },
                    { src: 'plugin/highlight/highlight.js', async: true }
                ]
            });
        </script>

you get reveal.js.pdf

Echsecutor commented 5 years ago

Cropping the image to the height of the pdf output pages (727px per default) is a work around for the pdf export, but that will make the HTML Presentation look ugly...

Echsecutor commented 5 years ago

Ok, sorry for the back and forth. There is a somewhat tricky interplay between setting parallaxBackgroundSize: and the actual image size and furthermore, the printout through chrome as explained in the README might look different from what is shown in chrome...

Anyway, setting parallaxBackgroundSize: '3200px 727', leads to a good pdf export, regardless of the image height, but in this case the bg is to small for the HTML view.