Search code examples
r-markdownxaringan

How can I add an image to the title slide in Rmarkdown (xaringan)?


I am making a presentation using xaringan. I would like to add the logo of my university in the background of the title slide. I would also like to know how to set the position of this image

Mi code is as follows:

--- 
title: "My presentations"
author: "My name"
date: "`r Sys.Date()`" 
output:
  xaringan::moon_reader:
    chakra: libs/remark-latest.min.js
    css: [xaringan-themer.css, my-theme.css]
    nature:
      countIncrementalSlides: false
      titleSlideClass: ["left", "middle", "inverse"]
      highlightLines: true
      highlightStyle: solarized-dark
    includes:
      in_header: header.html

---

And this is the my-theme.css file

.title-slide a, a > code {
    color: #aadff2;
    text-decoration: none;
  }
}

div.my-footer {
    background-color: #E7EEF0;
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 30px;
    width: 100%;
}

div.my-footer span {
    font-size: 14pt;
    color: #005f9b;
    position: absolute;
    left: 20px;
    bottom: 10px;
}

.inverse {
    background-color: #13306a;
    color: #E7EEF0;
}


Solution

  • This worked for me when I was working on my theme. I used Joseph V. Casillas's Rutgers theme and Tuo Wang's UW Madison theme as a reference.

    .title-slide {
      background-image: url(https://commkit.gsu.edu/files/2019/06/PrimaryLogo3color.jpg);
      background-position: 100% 0%; ## just start changing this
      background-size: 300px;
      background-color: #fff;
      padding-left: 100px;  /* delete this for 4:3 aspect ratio */
    }