Как добавить полноэкранное фоновое изображение в слайды Rpres (R Presentation)?

Question

Я хочу добавить полноэкранное фоновое изображение к одному или нескольким слайдам в моей колоде слайдов R Presentation (Rpres), созданной с помощью Rstudio. Я понимаю, что на слайдах R-презентации Rstudio используется фреймворкннннй.js, чтобы получить все приятные эффектные эффекты, и ближе всего я добился того, чего я хочу, следуя приведенному ниже примеру: https://www.uvm.edu/rsenr/vtcfwru/R/fledglings/14_Slideshows.html и добавление следующей строки перед началом слайда:

--- &slidebg bg:url(atlas.png);background-size:cover
### Introduction: about this talk

Blah blah blah...

Однако, хотя я вижу изображение, оно не центрируется, и изображение покрывает только доступную текстовую область, то есть изображение выглядит обрезанным, и вокруг изображения имеются большие поля. Если бы был способ центрировать изображение и убрать поля вокруг изображения, у меня было бы то, что я хочу. Я бы предпочел не взламывать html после вязки Rpres-файла. Кроме того, я бы предпочел не перекодировать свои слайды в html - мне нравится возможность создавать свои слайды в уценке в Rstudio.

Я попробовал, следуя совету здесь: Rpresentation в Rstudio - Сделайте так, чтобы изображение заполнило весь экран, комментарий об использовании http://github.com/regisb/reveal.js-fullscreen-img но я не смог получить это работать - либо предложенное решение не очень хорошо работает с файлами Rpres, либо информации в README было недостаточно для того, чтобы я взломал пакет, чтобы он заработал.

Это кажется очень простой просьбой. Конечно, что-то столь же простое, как добавление фонового изображения к слайду, не может быть таким сложным? Есть идеи, пожалуйста?

Answer 1

После другого ответа отсюда: Rstudio 0.98.1028 добавить фоновое изображение только к заголовку слайда

Вы можете иметь собственный файл CSS, содержащий ваше изображение в качестве фона. Давайте назовем это css-file.css:

<style>
/* Your other css */
    body {
      background-image: url(http://goo.gl/yJFbG4);
      background-position: center center;
      background-attachment: fixed;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
.section .reveal .state-background {
    background-image: url(http://goo.gl/yJFbG4);
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
</style>

Вы можете включить это в начало вашего файла.Rpres:

test
========================================================
author: 
date: 
css:css-file.css

Это должно дать вам фоновое изображение на титульном листе и с некоторыми изменениями, также на следующих страницах.

НТН!