Rstudio 0.98.1028 Add Background Image Only to Title Slide

Rstudio 0.98.1028 add background image only to title slide

You're 99% of the way there. Just one or two more tweaks and you'll have it. You may consider adding the following to ensure your slides are using the separate css file with something like the following added to your title slide.

Intro
======
author: Clever Name
css: css-file.css

You then can overwrite the background of the title slide by including the following between <style> </style> tags at the very top of your .Rpres file before your intro slide, or in your separate css file.

<style>
/* Your other css */

.section .reveal .state-background {
    background: url(foo1.png);
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
</style>

You're really close. Just change your title-slide { /* do stuff */ } to .section .reveal .state-background { /* do stuff */ }

Adding an image to title slide using slidify

The title-slide in io2012 framework is marked with the class title-slide. So you can customize the slide using css. For example, if you want to specify a background image, you need to add the following css.

  .title-slide {
     background-image: url(http://goo.gl/cF6W2);
   }

You can either add it directly to your Rmd file by enclosing it with <style></style> tags or to a custom css file in assets/css, which will automatically be included when you run slidify.

Hope this is useful.

EDIT. If you want to customize the appearance of the title slide further, you can tweak the lines in libraries/frameworks/io2012/layouts/deck.html.

Slidify: How to call image as background from assets/img folder?

As the css file is in folder path /libraries/frameworks/io2012/css/, it needs to go up 4 levels before it can see /assets/img/, so it should be

/* relative path */
background-image: url('../../../../assets/img/star-bg.png');

or you should be able to use

/* absolute path */
background-image: url('/presentaciones/prueba/assets/img/star-bg.png');

RMarkdown IO slides presentation is no longer supporting background images in the css file

Since you didn't provide any code, I can give you a hint how I would debug it: Bring up the Developer Tools, in most browsers it's going to be F12. Now

1. Click on the magnifier icon to select the element that should have the background-image set
2. Open the "Styles" tab to check if something overwrote your background-image (will be displayed as striked out text)

Maybe you can you can prove / disprove your "overriding"-hypothesis this way.

Good luck!

Add image on title area of a table with gt package in R

Here you go:

gt(mtcars) %>% tab_header(title = md("<img src='https://i.stack.imgur.com/UyMtM.png' style='height:30px;'> **2014 - 2019 Salary and Playoff Appearances**⚽"))

Change Title Slide Color in reval.js R Markdown presentation

If you check the DOM of the presentation (the HTML structure) you realize, that the backgrounds for the slides are created as individual div elements.
The first one of those defines the background for the title slide:

Therefore try

<style>
.slide-background:first-child {
  background-color: #00FF00;
}
</style>

This CSS selector picks the element with class .slide-background that is the first child of its parent (here the parent is the div element with class backgrounds).

(Notice that if you add the CSS in your RMD directly, an empty slide is produced. Therefore you should include them via the YAML header.)

---

Related Topics