Adding title slide image to RMarkdown slides with reveal.js
Asked Answered
D

1

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?

Disenthrone answered 21/4, 2016 at 18:29 Comment(0)
D
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"}
Disenthrone answered 25/10, 2016 at 1:6 Comment(1)
Seems like a bit of a hack. Is there any other way yet?Diaspora

© 2022 - 2024 — McMap. All rights reserved.