Inserting a hero image into rmarkdown header

Question

I am trying to insert an banner image, with some text overlaid, across the header of an HTML document produced using rmarkdown. I am brand new to HTML but I have written a basic webpage that works (see below) and now I would like to insert it in the header of the HTML document.

Right now I'm just trying to make it work so I have been using this image called melon.png:

I have updated the boilerplate example in rmarkdown to use the in_header YAML field as follows:

---
title: "header_test"
author: "Dos"
date: "20 December 2018"
output: 
  html_document:
    includes:
      in_header: C:/Users/Dos/Documents/html/CSS Backgrounds.html
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

## R Markdown

This is an R Markdown document. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see .

The CSS Backgrounds HTML file referred to at in_header and the accompanying CSS files read as follows:

div {
  height: 220px;
  width: 40cm;
  background-image: url('file:///C:/Users/Dos/Pictures/melon.png');
  background-repeat: no-repeat;
  background-size: 40cm 12cm;
}
.center {
   margin: auto;
   padding: 12px;
}



  
    
    Economic Note

When I go to knit the file I get an error message:

pandoc.exe: Could not fetch file:///C:/Users/Dos/Documents/html/CSS Backgrounds css.CSS InvalidUrlException "file:///C:/Users/Dos/Documents/html/CSS%20Backgrounds%20css.CSS" "Invalid scheme" Error: pandoc document conversion failed with error 67 Execution halted

Any points on how I can go about this would be great.

user_17196541 · Answer

It looks like you are trying to insert the HTML into the header. What you want to do is modify the CSS of the RMarkdown itself.

Using your own example, I modified the YAML field to:

---
title: "header_test"
author: "Dos"
date: "20 December 2018"
output:
  html_document:
    css: "style.css"
---

And this is my style.css file:

body {
     color: white;
     background: url('/path/to/file') no-repeat top center;
}

I don't have enough reputation to add images, but the output has the image you posted as the background. I'm not too familiar with "hero" banner configurations, but I assume it is done through CSS, so you should be able to modify it however you like.

Inserting a hero image into rmarkdown header

1 Answers