Multiple images (logo and a background image) in xaringan Title Slide

Question

I'm trying to use a logo plus a background image on slides prepared with xaringan (rmarkdown). I haven't found instructions on how to do that.

So far, I have this (only the logo):

---
output:
  xaringan::moon_reader:
    css: ["xaringan-themer.css","mi_estilo.css"]
    lib_dir: libs
    nature:
      titleSlideClass: ["left", "bottom"]
      ratio: '16:9'
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
---

And, this is in the CSS file:

/* Add image and change bg color */
.title-slide {
  background-image: url(logo-ean-blanco.png);
  background-position: 11% 15%;
  background-size: 200px;
  padding-left: 100px;  
}

So, how can I add now a background image on the front page or title slide? Thanks!

Answer 1

You can specify paths to two images (one for logo and other for background image) in background-image css property by comma separating the url paths and also specify other background properties for the two images separating with comma. See here to know more about this.

---
title: "xaringan"
author: "None"
output:
  xaringan::moon_reader:
    css: ["xaringan-themer.css","mi_estilo.css"]
    lib_dir: libs
    nature:
      titleSlideClass: ["left", "bottom"]
      ratio: '16:9'
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
---

mi_estilo.css

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

---

---