3

I want to add a full-screen background image to one or more slides in my R Presentation (Rpres) slide deck created with Rstudio. I understand that Rstudio's R Presentation slides use the reveal.js framework to obtain all the nice eye-candy effects, and the closest I've got to achieving what I want is by following the example here: https://www.uvm.edu/rsenr/vtcfwru/R/fledglings/14_Slideshows.html and adding the following line before the start of a slide:

--- &slidebg bg:url(atlas.png);background-size:cover
### Introduction: about this talk

Blah blah blah...

However, although I see the image, it is not centered and the the image only covers the available text area -- that is, the image appears to be cropped and there are large margins surrounding the image. If there was a way to center the image and remove the margins around the image, I would have what I want. I'd rather not have to hack the html after knitr'ing the Rpres file. Also, I'd rather not have to re-code my slides in html -- I like being able to create my slides in markdown in Rstudio.

I did try following the advice here: Rpresentation in Rstudio - Make image fill out the whole screen specifically, the comment about using http://github.com/regisb/reveal.js-fullscreen-img but I couldn't get this to work -- either the proposed solution doesn't play well with Rpres files, or the information in the README wasn't sufficient for me to hack together a kludge to get it working.

This seems like a very simple request to make. Surely something as simple as adding a background image to a slide cannot be so hard? Any ideas, please?

Community
  • 1
  • 1
Dr. Andrew John Lowe
  • 510
  • 8
  • 20

1 Answers1

3

Following another answer from here: Rstudio 0.98.1028 add background image only to title slide

you can have a custom css file containing your image as background. Let's call it css-file.css: 

<style>
/* Your other css */
    body {
      background-image: url(http://goo.gl/yJFbG4);
      background-position: center center;
      background-attachment: fixed;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
.section .reveal .state-background {
    background-image: url(http://goo.gl/yJFbG4);
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
</style>

You can include that at the beginning of your .Rpres file:

test
========================================================
author: 
date: 
css:css-file.css

This should give you a background image on the title page, and with a few edits, to the following pages also.

HTH!

Community
  • 1
  • 1
Leon
  • 63
  • 7
  • 1
    Thanks! But not quiet done yet. I tried what you suggested, but it seems that the css-file.css is overridden by other stuff. I got better results when I pasted the code after the YAML and before my first slide. I don't understand why I need to specify the background-image info in two different blocks. The first appears to be sufficient. However, in any case, the only behaviour I'm able to achieve is to make the image the background for **all** slides, including the title slide. I'd like more control; I want the image on the title slide only and perhaps different backgrounds on other slides. – Dr. Andrew John Lowe Dec 04 '15 at 18:32
  • I should mention that the `.section .reveal .state-background` block doesn't seem to have any effect. I can change the properties of `body` globally, but not for individual slides. – Dr. Andrew John Lowe Dec 04 '15 at 18:53