Two images on revealjs title slide

[EllaKaye]

Description

I am creating a revealjs extension with my University's new branding, and they require two images on the title slide, one in the top right corner, and one in the bottom left. I know it's possible to add an image to the title slide (top-right) with

title-slide-attributes:
  data-background-image: my_image.png
  data-background-position: 100% 0%

but I can't figure out how to add a second image. I tried adding a second image in the bottom left using CSS (in addition to the above yaml):

#title-slide {
  background-image: url('another_image.png');
  background-size: 5%;
  background-position: 0% 100%
}

but that didn't seem to have any effect at all.

Is it possible to have two images on the title slide and, if so, how? (don't mind how hack-y the solution is!)

I'm using Quarto 1.8.22 on macOS 15.6.1.

[mcanouil]

It's 100% possible, but that's very hard to provide you with a concrete answer without something to work on in the first place.
Your question is really a CSS question.

I'm also not sure what this "two images on the title slide, one in the top right corner" means exactly?

Finally, you need to understand that YAML is not independent of the HTML/CSS produced.
The YAML you've set is modifying the same thing as your CSS rule.

[mcanouil]

Amongst the numerous CSS approaches and trying to guess what you wanted:

---
title: "Quarto Playground"
format: revealjs
include-in-header:
  - text: |
      <style>
        .quarto-corner-img {
          position: absolute;
          width: 200px;
          height: auto;
          z-index: -1;
        }
        .quarto-top-right {
          top: 0;
          right: 0;
        }
        .quarto-bottom-left {
          bottom: 0;
          left: 0;
        }
      </style>
      <img src="quarto.png" alt="Quarto logo" class="quarto-corner-img quarto-top-right" />
      <img src="quarto.png" alt="Quarto logo" class="quarto-corner-img quarto-bottom-left" />
---

[EllaKaye]

Thanks @mcanouil. That's basically what I'm after but I only want this on the title slide and not on the rest of the presentation. Your solution puts both images on all pages. I've tried modifying in various ways, e.g. putting the contents of the <style> tag above inside a #title-slide selector, but that doesn't work. I've tried a bunch of suggestions from Positron Assistant to no avail. I appreciate this seems like a CSS question, but I think it's about the combination of CSS and revealjs and how Quarto creates title slides. Any further suggestions/fixes would be much appreciated. Thank you!

[mcanouil]

but I think it's about the combination of CSS and revealjs and how Quarto creates title slides.

See https://quarto.org/docs/journals/templates.html#revealjs-partials

Using your favourite browser inspect/developer mode will help you figure out the right selectors for the CSS.

[mcanouil]

You can add more hack and use JavaScript to dynamically hide the images when not on "title-slide".
There are discussions about this:

• Struggling to customize the title-slide.html #13264

---
title: "Quarto Playground"
format: revealjs
include-in-header:
  - text: |
      <style>
        .quarto-corner-img {
          position: absolute;
          width: 200px;
          height: auto;
          z-index: -1;
        }
        .quarto-top-right {
          top: 0;
          right: 0;
        }
        .quarto-bottom-left {
          bottom: 0;
          left: 0;
        }
      </style>
      <img src="quarto.png" alt="Quarto logo" class="quarto-corner-img quarto-top-right" />
      <img src="quarto.png" alt="Quarto logo" class="quarto-corner-img quarto-bottom-left" />
include-after-body:
  - text: |
      <script type="text/javascript">
        function toggleCornerImg(indexh) {
          const displayCornerImg = indexh === 0 ? "" : "none";
          document.querySelectorAll("img.quarto-corner-img").forEach(img => {
            img.style.display = displayCornerImg;
          });
        }
        Reveal.addEventListener("ready", (event) => {
          toggleCornerImg(event.indexh);
        });
        Reveal.addEventListener("slidechanged", (event) => {
          toggleCornerImg(event.indexh);
        });
      </script>
---