Add a background images to all Xarigan slides

Hi,

I know how to insert a background image on specific Xarigan slides. Is there 1-time option that could be set to insert a background image on all slides?

Thanks in advance

Reading through the wiki here and here, you'd have to do the following:

  • Create and specify a custom .css file in the YAML header of your .Rmd file like so:
---
title: "Presentation Ninja"
subtitle: "with xaringan"
author: "Yihui Xie"
date: "2016/12/12"
output:
  xaringan::moon_reader:
    css: ["default", "my-theme.css"]
    lib_dir: libs
    nature:
      highlightStyle: github
      highlightLines: true
---
  • Within your my-theme.css file, have something like:
.inverse, .hljs-github {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/3/39/Naruto_Shiki_Fujin.svg); /* Change this to the url of the image you want as your background */
  background-size: cover;
}

To me it seems the .inverse and .hljs-github classes should cover all your slides.

2 Likes

Thanks @jdb

This seems to work on a small test slide deck.

Interesting to know that there is a wiki section in the github repo! Thanks for that too.

1 Like

Our workshop slides may help: https://arm.rbind.io/slides/xaringan.html#block3

From the advanced R Markdown workshop at rstudio::conf 2019.

2 Likes

Hi @apreshill ,

I attended the workshop. It was great. The material did help me set background images but I could not find how to do that on the entire slide deck.

Great reference material still!

Hi, ok great! My solution would be to use a layout with a background image, defined at the top of your deck right after the YAML:

---

layout: true

background-image: url(img/mybackground.png)
background-size: cover

---

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.

If you have a query related to it or one of the replies, start a new topic and refer back with a link.