CODEWITHSUNDEEP
cssrstudioquartoreveal.js
midden
midden

Reputation: 75

Full coverage background image on quarto title slide with a row of icons along the bottom

I am trying to make a title slide for a reavaljs presentation using Rstudio and quarto. I would like my title slide to have full coverage background image and one or more small icons along the bottom (but not on other slides). I have attempted to modify this method suggested for xaringan, but have not had any success. Here is my .qmd YAML and css:

---
title: "Test Presentation"
author: "Name"
format: 
  revealjs:
    embed-resources: true
    css: css/slides.css
editor: source
---

slides.css

.title-slide {
  background-image: url(https://placeholder.pics/svg/100),
                    url(https://picsum.photos/id/870/800/600?grayscale);
  background-position: 2% 98%, center;
  background-size: 100px, cover;
}

I have also tried altering the title-slide-attributes to provide multiple images, but could not find a syntax that worked.

Based on the response by @shafee below, I tried:

---
title: "Test Presentation"
author: "Name"
format: 
  revealjs:
    theme: night
    embed-resources: true
    title-slide-attributes: 
      data-background-image: "https://placeholder.pics/svg/100,https://picsum.photos/id/870/800/600?grayscale"
      data-background-size: 100px, cover
      data-background-position: 2% 98%, center
editor: source
---

The issue is that when I pull revaljs out on its own line so that I can include other details such as embed-resources, only the icon shows up on the title slide. If I reverse the order of these, the background image shows up (in color instead of grayscale) but the icon is not present. The same behavior happens regardless of whether the title-slide-attributes block is indented or not.

Upvotes: 0

Views: 1474

Answers (2)

midden
midden

Reputation: 75

Thanks to @shafee, this has been solved. Apparently embed-resources is not compatible with a complex title slide. This is too bad, because I cannot usually provide a folder to a conference—they want a single file for me to present from and to share. I am not sure this is a bug, but it is certainly a design feature for the quarto/posit developers to consider.

In the short-term, however, this is GREAT. Thanks for your help!

---
title: "Test Presentation"
author: "Name"
format: 
  revealjs:
    theme: night
    scrollable: true
    echo: true
    incremental: false 
    code-fold: true
    code-overflow: scroll
    embed-resources: false
    title-slide-attributes: 
      data-background-image: "https://placeholder.pics/svg/100, https://placeholder.pics/svg/100,https://placeholder.pics/svg/100, https://picsum.photos/id/870/800/600?grayscale"
      data-background-size: 100px, 100px, 100px, cover
      data-background-position: "2% 98%, 50% 98%, 98% 98%, center"
editor: source
---

This yields: enter image description here

Upvotes: 0

Shafee
Shafee

Reputation: 20107

You can do the same for Quarto revealjs too using title-slide-attributes.

Just pass the image path in a string (comma separated).

---
title: "Test Presentation"
author: "Name"
format: revealjs
title-slide-attributes: 
  data-background-image: "https://placeholder.pics/svg/100,https://picsum.photos/id/870/800/600?grayscale"
  data-background-size: 100px, cover
  data-background-position: 2% 98%, center
  
---

## Quarto

Quarto enables you to weave together content and executable code into a finished presentation.

## Bullets

When you click the **Render** button a document will be generated that includes:

-   Content authored with markdown
-   Output from executable code

title slide background

Upvotes: 1

Related Questions