Including banner images on R markdown website pages

user_14109040 0
Viewed 617

I'm developing a simple R-markdown website with multiple pages. Other than the home page, each page has a table of contents and content accordingly.

The yaml of such a page would be as follows

---
title: "Page Title"
output:
  html_document:
    toc: true
    toc_float: true
    number_sections: false
---

The output HTML would have the table of contents on the left and the content on the right, with the title - "Page Title" printed out at the top of the content.

I now want to include a banner at the start of the content of each page, as the background of the title. In other words I want a banner image on each page overlayed by the title of the page. The images are stored locally in the file structure.

I followed this approach https://rpubs.com/thaufas/555157 but this is specific to a single page with a specified banner image. But I would like a more general approach using which I can include different images as banners on each page.

r-markdown r css html
1 Answers

First, find the class or id of the page title. Normally, it should have the id header. Then define the background image for the header element. At last, include the CSS in your Rmd document, e.g.,

```{css, echo=FALSE}
#header {
  background: url(https://linesteppers.com/tutorials/RMarkdown/img/BannerImage_TreeBlossoms_4470x3024.jpg);
  padding: .5em;
}
```

You could also include the CSS via the css option of html_document, but you would have to create a .css file for each .Rmd document. I used the css code chunk above, so you wouldn't need to create external css files.

user_5596760
Related