Menu
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 <http://rmarkdown.rstudio.com>.
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;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Economic Note</title>
<link rel="stylesheet" href="file:///C:/Users/Dos/Documents/html/CSS Backgrounds css.CSS">
</head>
<div class="center">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.
360
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.
146
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
