9

I'm trying to figure out how to include centered background images on title slides using reveal.js slides while writing in RMarkdown a la http://rmarkdown.rstudio.com/revealjs_presentation_format.html

The test deck I have is as follows

---
title: "Attempt"
css: style.css
output: revealjs::revealjs_presentation
---

## Will this work

- Did the title slide have an image?

with style.css as

.title {
    background-image: url(http://img1.wikia.nocookie.net/__cb20100706023807/familyguy/images/c/c7/Tauntaun.png);
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    }

Note, .title is the only thing that will show any images at all on the title slide. I've tried a few other combinations based on what I've seen on SO and other places.

.section .reveal .state-background based on Rstudio 0.98.1028 add background image only to title slide

.title-slide based on Adding an image to title slide using slidify

None of these work. Am I missing something? Perhaps is there a magic YAML option I've left out?

Community
  • 1
  • 1
jebyrnes
  • 9,082
  • 5
  • 30
  • 33

1 Answers1

7

OK, here's the easy answer. Essentially, make a blank title and then have an image as your data background on your title slide. You can do anything else you want on said title slide as well. I use divs to put a nice big title in the middle of the slide.

---
title: 
output: revealjs::revealjs_presentation
---

## {data-background="http://img1.wikia.nocookie.net/__cb20100706023807/familyguy/images/c/c7/Tauntaun.png"}
jebyrnes
  • 9,082
  • 5
  • 30
  • 33