CODEWITHSUNDEEP
cssrrstudior-markdown
James Thomas Durant
James Thomas Durant

Reputation: 305

Rstudio 0.98.1028 add background image only to title slide

I am attempting to create a R Presentation (.Rpres) using RStudio 0.98.1028 with a different background image on the title slide and another background image on the rest of the slides. I am able to place a custom background (foo.png) by creating a css file with this in it: 

    body {
      background-image: url(foo.png);
      background-position: center center;
      background-attachment: fixed;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

I was able to turn off the default color scheme on the title slide and make the color black with this:

.section .reveal .state-background {
    background: transparent;}

.section .reveal h1,
.section .reveal p {
    color: black;



}

To get foo1.png into the title slide, Other posts (Adding an image to title slide using slidify) I have seen suggest adding this to the css:

.title-slide {
     background-image: url(foo1.png);
   }

Which does not insert foo1.png. However, foo.png stays on all the slides (including the title slide). How do I get foo1.png on my title slide?

Upvotes: 5

Views: 3235

Answers (1)

Daniel Robertson
Daniel Robertson

Reputation: 1394

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 */ }

Upvotes: 7

Related Questions