Slidify - how to customize a slide background?

Question

I have been struggling to customize the background of my slide deck using the 'slidify' package.

Actually, I could do it for the title slide by modifying the file 'slidify.css' though:

.title-slide {
/*background-color: #CBE7A5 */; /* #EDE0CF; ; #CA9F9D*/
background-image:url(C:/path/mypng.png);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
 }

However I can't find how to do it for the 'standard' slides. I can use

--- bg:url(C:/path/mypng.png)  

directly in my .Rmd file but I am unable to add the repeat and size options.

Does anyone have any tips on how to do it / where to add it within the CSS files?

Cheers,

Shoop

Please remove the r tag. – Kilocycle

Answer 1

If it is a one off slide you are trying to add a background to, then the following will work

--- #custbg

## Slide with custom background

<style>
#custbg {
  background-image:url(C:/path/mypng.png); 
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
</style>

If you have multiple slides where you want such a custom background, then you can take advantage of templates. So, rewrite the slide as below

--- &custbg bg:"C:/path/mypng.png"

## Slide with custom background

Then create a layout named custbg.html and drop it in the assets/layouts folder from where slidify will automatically pick layouts. Here is a short explanation of what happens. The custbg.html layout inherits from the parent layout slide.html. Everything you see between {{{ and }}} is a placeholder to be populated by slidify. {{{ slide.html }}} contains the original slide content. We are appending to this content, dynamic styling by using the id attribute. Note that this layout only allows users to specify a bg in the slide. If you want you can customize other style attributes as well. The advantage of the layout approach is that you can allow multiple slides to take advantage of custom backgrounds.

---
layout: slide
---

{{{ slide.html }}}

<style>
#{{{ slide.id }}} {
  background-image:url({{{ slide.bg }}}); 
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
</style>

Ejection

Using this solution causes me to have duplicate headers. – Pink

Answer 2

Well, another way to get an image as background:

As local file (image in the same folder of index.html):

--- .class1 #id1 bg:url(picture.png)
## Slide with custom background
content slide

As local file (in a folder of images, only works inside this path assets/img):

--- .class1 #id1 bg:url(assets/img/picture.png)
## Slide with custom background
content slide

From internet

--- .class1 #id1 bg:url(http://placekitten.com/600/375)
## Slide with custom background
content slide

If image size is small, we can see many of our images trying to cover all the slide. On the other hand, if image is big, we can see only part of the image as the slide backgrpund. I think, there is a way to call a cover option. Well, in my case, i resize the image to skip the problem.

Considerations:

Browsers tested: Mozila Firefox and Google Chrome.

framework : io2012

Thearchy