R - Quarto HTML document. How to insert logo image at the left of the Title / subtitle area

Question

I'm trying to insert a company logo image on a HTML report generated with Quarto from RStudio. My report template is the following

---
title: "Report Title"
subtitle: "Report subtitle"
author: "Name and Sruname"
date: last-modified
date-format: "DD-MM-YYYY"
description: "Text Text Text Text Text Text Text Text "
last-modified:
title-block-banner: true
format: 
  html:
    embed-resources: true
    smooth-scroll: true
    theme: cosmo
    fontcolor: black
    toc: true
    toc-location: left
    toc-title: Summary
    toc-depth: 3
---

```{r sesPackages, results='hide', message=FALSE, warning=FALSE, echo=FALSE}    
library(tidyverse,  verbose = F, quietly = T)
library(knitr,      verbose = F, quietly = T)
library(kableExtra, verbose = F, quietly = T)
library(tinytex,    verbose = F, quietly = T)    
```

```{r qrtOptions, echo=FALSE, cache=FALSE}
opts_chunk$set(echo=FALSE,
                 cache=TRUE,
               prompt=FALSE,
               tidy=TRUE,
               comment=NA,
               message=FALSE,
               warning=FALSE,
               width=75)

knitr::opts_chunk$set(cache = FALSE)
```

# Report contents 

```{r}    
diamonds %>% 
  group_by(cut, color) %>% count() %>% 
  pivot_wider(names_from = color, values_from = n) %>% 
  rename(Cut = cut) %>% 
  kable(format.args = list(decimal.mark = ',', big.mark = "."), caption = "From Diamonds data frame") %>%
  kable_styling(bootstrap_options = c("striped", "hover", "condensed", "responsive"), full_width = T, position = "left", fixed_thead = T)
```

From the answers provided for this question Insert a logo in upper right corner of R markdown html document I've tried to follow some responses but all place the image on the ID=quarto-document-content.

The answers also provide also some simple tricks to move the image like style = 'position:absolute; top:0; right:0; padding:10px;' but do not work fine when the responsiveness of the HTML is a requirement.

There is a way (also using a custom CSS) to place an image at the left of the title saving the HTML responsiveness?

Sergent

Answer 1

Maybe this helps? Assuming your logo is in the folder "images", here exemplatory the rstudio logo, we add a styles.css file:

.quarto-title-block .quarto-title-banner {
  background-image: url(images/rstudio_logo.png);
  background-size: 300px;
  background-position: left;
  background-repeat: no-repeat;
  padding-left: 10px;
  background-origin: content-box;
}

And change the yaml to

---
title: "Report Title"
subtitle: "Report subtitle"
author: "Name and Sruname"
date: last-modified
date-format: "DD-MM-YYYY"
description: "Text Text Text Text Text Text Text Text "
title-block-banner: "#27445C"
format: 
  html:
    embed-resources: true
    smooth-scroll: true
    theme: cosmo
    fontcolor: black
    toc: true
    toc-location: left
    toc-title: Summary
    toc-depth: 3
css: styles.css
---

Output:

Cheery

It work fine thanks! I try to take advantage of your kindness for a further question of detail: is it possible to assign the image a number of pixels as the left margin? – Sergent

Doesn't work for me. I assume the styles.css file and images folder go in the same folder as the qmd file? – Coreen

exactly, thats correct. – Cheery

Answer 2

title: |
  ![](images/logo.png){width=5in}
  Insert your title

Source: https://bookdown.org/yihui/rmarkdown-cookbook/latex-logo.html

Wallen