Image placeholder in Xaringan

Question

I am using the xaringan library from Yihui in R to create a custom template for a presentation.

Part of this is creating custom body slides as pictured below.

I then use custom CSS for the headers and body:

  .body-yellow > h2 {
      font-size: 42px;
      text-transform: uppercase;
      padding-left: 
}

And then just type in rmarkdown something like:

---
class: body-yellow

# Hello

## world

Hello world

This then populates the slide.

My question is, is there a way to create a placeholder for the image shown in the template above that I could adjust in the rmarkdown code itself?

I am imagining code like:

---
class: body-yellow
background-images: url(./img/my_new_custom_image.png)

# Hello

## world

Hello world

And the relevant adjustment in CSS:

 .body-yellow > image {
    background-images: PLACEHOLDER
    position:right
    }

Which will change the image as follows:

Excuse my CSS ignorance, but I am only starting to dabble in this area.

Answer 1

You can set a global background image for the body-yellow class, and override it with the background-image attribute on a particular slide. Here is a minimal example:

---
title: "Test"
output:
  xaringan::moon_reader:
    nature:
      ratio: "16:9"
---

class: body-yellow

```{css, echo=FALSE}
 .body-yellow > h2 {
  font-size: 42px;
  text-transform: uppercase;
  padding-left: 50px;
}
.body-yellow {
  background-image: url(https://i.sstatic.net/OSrg8t.png);
  background-size: contain;
}
```


## Default background

---
class: body-yellow
background-image: url(https://i.sstatic.net/X1C2Bt.png)

## A custom background