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?

1 Answer 1

8

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"}
1
  • 3
    Seems like a bit of a hack. Is there any other way yet? Commented Oct 21, 2019 at 3:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.