Presentation logo & background image

Question

I am creating a report using slidy presentation and trying to embed a logo for all the slides and a background image in the first slide (As a cover page). I have been trying for a while now, but unfortunately with no luck. The code I have works perfectly fine with ioslides presentation not slidy, and I want to use slidy as the size of the page is wider than ioslides. Please help

---
title: "10"
output:
   slidy_presentation:
      css: styles.css
logo : logo.png
biglogo : logo.png
date: "2022-11-01"
runtime: shiny
---

The CSS file "styles.css":

slides>slide.title-slide {
    background-image: url('logo_1.png');
    background-size: 100% 100%;
}

Update: So far I was able to add a background image on the right, and a small logo on the bottom left through css. However, the date now is beneath the small logo. Any help guys to get the date back to its place, my CSS file:

 div.slide.titlepage {
  text-align: left;
  background-image: url('logo_1.png');
  background-size: auto;
  background-repeat: no-repeat;
  background-position: right; 
}
div.slide.titlepage h1 {
  padding-bottom: 30%;
  margin-right: 0;
  background-image: url('logo.png');
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 150px 60px;
}

Answer 1

You can directly manipulate the date text on the title slide in Slidy presentations. It has the date class in HTML, which you can view by right-clicking on the document after opening the HTML file, then selecting Inspect Element or something similar, depending on your browser.

The following is a sample from the CSS template I used for my own application. Edit according to your needs.

.date {
  font-size: 32px;
  text-align: left;
  margin-left: 2%
}