Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adding title slide image to RMarkdown slides with reveal.js

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?

like image 271
jebyrnes Avatar asked Apr 21 '16 18:04

jebyrnes


1 Answers

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"}
like image 59
jebyrnes Avatar answered Jan 02 '23 05:01

jebyrnes