RMarkdown IO slides presentation is no longer supporting background images in the css file

Question

Creating slides with image backgrounds - the code

As recently as a few weeks ago, I was able to successfully do the following within RStudio when creating an RMarkdown file.

Rmarkdown File (the top YAML portion):

output:   ioslides_presentation:     css: ../css/slide_style.css     logo: ../css/logos/approved.Logos.016.jpg     self_contained: yes 

This would then source the css file slide_style.css, which contained, among other things, the following:

/* Below is the code to drop in a nice image for the background OUTSIDE of the slides. */ /* line 58, ../scss/default.scss */ /* line 236 of ../theme/../default.css */  body {     background-image: url('../css/backgrounds/outside_slides.png'); }   /* Below is the code to drop in a nice image for the slide backgrounds, or "backdrop". */ /* line 170, ../scss/default.scss */ /* line 320 of ../theme/../default.css */  slides > slide.backdrop {     background-image: url('../css/backgrounds/inside_slide.png'); } 

This used to work, where the inside_slide.png file would be embedded as a background image (repeated) within the slides themselves, and the outside_slides.png file would be similarly embedded, but around the outside edges of the central slide.

Embedding images no longer works - I've tried...

The rest of the css file works just fine. I have nice effects, IMHO, that change where the titles are at, allows for levels of titling, changes how tables look, etc. All that is still working fine. The images themselves are not being embedded. Explicitly, outside_slides.png and inside_slides.png images are no longer being rendered within the generated .html file.

Checking file paths...

So, you might guess that the files themselves are the problem. I have checked the file path, all is good. In fact, I purposely messed it up, to make sure it would fail. It failed, when the path was wrong.

Opening the files themselves...

Maybe the files don't have what I think they have? Nope, I can inspect the files with Preview or whatever, they look fine. I also pointed to other image files, those cannot be viewed as a background, either. I tried with .png, .jpg, and .gif. No luck.

Ensuring the css file can do other actions...

Maybe something is over-writing this body tag? I tried something simple like background-color: orange;, and that works fine. I changed the opacity, and that worked. I also tried to add !important to the css sheet. That did not help. (Meaning, it worked for background-color, but not for background-image.)

It's as if something is over-riding such that background-image simply will not work.

I've been using RStudio for much of the testing. Neither the presentation generated within RStudio, nor the generated .html, opened via a web browser, show the image.

Does anyone have any ideas what is going on?

Edit

Here is my session info:

> sessionInfo() R version 3.1.3 (2015-03-09) Platform: x86_64-apple-darwin13.4.0 (64-bit) Running under: OS X 10.10.4 (Yosemite)  locale: [1] en_US.UTF-8/en_US.UTF-8/en_US.UTF-8/C/en_US.UTF-8/en_US.UTF-8  attached base packages: [1] stats     graphics  grDevices utils     datasets  methods   base       loaded via a namespace (and not attached): [1] digest_0.6.8     htmltools_0.2.6  rmarkdown_0.7.3  rsconnect_0.3.79 tools_3.1.3      yaml_2.1.13      

Answer 1

Since you didn't provide any code, I can give you a hint how I would debug it: Bring up the Developer Tools, in most browsers it's going to be F12. Now

1. Click on the magnifier icon to select the element that should have the background-image set
2. Open the "Styles" tab to check if something overwrote your background-image (will be displayed as striked out text)

Maybe you can you can prove / disprove your "overriding"-hypothesis this way.

Good luck!