1

All,

I cannot understand why the image is not displayed in the background of my document, generated within RStudio (via the knitr button, to generate a slidy html document).

here is my reproducible example:

test.Rmd

---
title: "test"
output: 
  slidy_presentation:
    css: testcustom.css
    font_adjustment: -3
---

## Introduction {#intro}

### Hello World! 

This works: background-color: #6495ed;  
This does not work: background-image: url(pic/Presentation.jpg);

testcustom.css

#intro {
    background-image: url(pic/Presentation.png);
    background-color: #6495ed;
}

image is the following: http://displaynote.com/wp-content/uploads/2015/02/Presentation.jpg, located in pic/Presentation.jpg

How can I fix this problem? It neither works in IE nor in Chrome.

Many thanks for your help!

cho7tom
  • 1,030
  • 2
  • 13
  • 30
  • Is your `testcustom.css` file using the same same file path as `pic/Presentation.jpg`? – James Donnelly Sep 23 '15 at 15:02
  • test.Rmd and testcustom.css are in the same folder (project's root), with the pic folder as well. Presentation.png file is in the pic folder. – cho7tom Sep 23 '15 at 15:04

1 Answers1

0

I think it's actually working, but your image is so large that it's offscreen! Try this content for testcustom.css to scale the JPG file so it fits the screen:

#intro {
    background-image: url(pic/Presentation.jpg);
    background-color: #6495ed;
    background-size: 100% 100%;
}
Jonathan
  • 8,497
  • 41
  • 35