css background-image在Rmd slidify中不起作用

Question

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!

Answer 1

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%;
}