A new CSS slide class with background image is buggy with "too much" content

[sctyner]

Hi @yihui,

I'm loving xaringan for making a new slide template instead of using powerpoint or beamer at work. But, I'm running into issues.

Background

What I'm attempting to do is create slide types (in the example, class .primary, and in my work I also have a type .secondary) and use those to style slides. e.g.

---
class: primary 
# Slide Title 

content 

I take the powerpoint master background as the background image. The css that differs from default.css looks like:

.primary {
  background-image: url("primaryslideimg.png"); /*attached*/
  background-size: cover;
  color: #000000;
}

Issue

My problem is that if I add an image that is "too big", a code chunk with "too much" code or output, or a slide with "too much" text, the background image resizes and sometimes becomes so big I cannot see the whole background image in the slide.

The issue seems to be that there is "too much" content and so the whole slide resizes, and appears "zoomed in".

Of course one solution is just to remove some content and make the images smaller, but with a reasonable amount of text (see slide 4/5 in repro example), that option seems too cumbersome and inefficient.

Is there a CSS solution here? It is a remark-js issue? It seems like the background-size: cover; argument should do the trick, but it's failing here.

Thanks, Sam

Reproducible Example

Here's the background image.

defaultv2.css:

a, a > code {
  color: rgb(249, 38, 114);
  text-decoration: none;
}
.footnote {
  position: absolute;
  bottom: 3em;
  padding-right: 4em;
  font-size: 90%;
}
/* different CSS */
.primary {
  background-image: url("primaryslideimg.png");
  background-size: cover;
  color: #000000;
}
/* end different CSS */ 
.remark-code-line-highlighted     { background-color: #ffff88; }

.inverse {
  background-color: #272822;
  color: #d6d6d6;
  text-shadow: 0 0 20px #333;
}
.inverse h1, .inverse h2, .inverse h3 {
  color: #f3f3f3;
}
/* Two-column layout */
.left-column {
  color: #777;
  width: 20%;
  height: 92%;
  float: left;
}
.left-column h2:last-of-type, .left-column h3:last-child {
  color: #000;
}
.right-column {
  width: 75%;
  float: right;
  padding-top: 1em;
}
.pull-left {
  float: left;
  width: 47%;
}
.pull-right {
  float: right;
  width: 47%;
}
.pull-right ~ * {
  clear: both;
}
img, video, iframe {
  max-width: 100%;
}
blockquote {
  border-left: solid 5px lightgray;
  padding-left: 1em;
}
table {
  margin: auto;
  border-top: 1px solid #666;
  border-bottom: 1px solid #666;
}
table thead th { border-bottom: 1px solid #ddd; }
th, td { padding: 5px; }
thead, tfoot, tr:nth-child(even) { background: #eee }

@page { margin: 0; }
@media print {
  .remark-slide-scaler {
    width: 100% !important;
    height: 100% !important;
    transform: scale(1) !important;
    top: 0 !important;
    left: 0 !important;
  }
}

test.Rmd

(Note escaped ticks for code chunks)

---
title: "Presentation Ninja Headache"
author: "Sam Tyner"
date: "2018/05/25"
output:
  xaringan::moon_reader:
    css: "defaultv2.css"
    lib_dir: libs
    nature:
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
---

\```{r setup, include=FALSE}
options(htmltools.dir.version = FALSE)
\```

class: primary 
# Primary slide type with bg image and text is ok

Hello world! 

---
class: primary 
# Slide with bg image and another image is ok

![](https://i.pinimg.com/originals/b0/a5/4e/b0a54ecfede3da89a444ac1b10c55241.jpg)

---
class: primary 
# Slide with bg image and  "too much" code

Here is some code 

\```{r}
x <- rnorm(100)
summary(x)
y <- rgamma(100,shape = 1)
summary(y)
summary(x+y)
\```

---
class: primary 
# primary slide type with bg image, some text and a "too large" image

Why? 

![](https://i.pinimg.com/originals/b0/a5/4e/b0a54ecfede3da89a444ac1b10c55241.jpg)

System Info

> sessionInfo()
R version 3.4.3 (2017-11-30)
Platform: x86_64-apple-darwin15.6.0 (64-bit)
Running under: macOS High Sierra 10.13.4

Matrix products: default
BLAS: /System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libBLAS.dylib
LAPACK: /Library/Frameworks/R.framework/Versions/3.4/Resources/lib/libRlapack.dylib

locale:
[1] en_US.UTF-8/en_US.UTF-8/en_US.UTF-8/C/en_US.UTF-8/en_US.UTF-8

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

loaded via a namespace (and not attached):
 [1] compiler_3.4.3  backports_1.1.2 magrittr_1.5    rsconnect_0.8   rprojroot_1.3-2
 [6] htmltools_0.3.6 tools_3.4.3     xaringan_0.6.7  yaml_2.1.18     Rcpp_0.12.16   
[11] stringi_1.1.7   rmarkdown_1.9   knitr_1.20      xfun_0.1        stringr_1.3.0  
[16] digest_0.6.15   evaluate_0.10.1

RStudio version 1.2.637

[yihui]

I think contain is a better option for background-size in your case:

    background-size: contain;
    background-position: 0 0;

See https://www.w3schools.com/cssref/css3_pr_background-size.asp

BTW, you can (and should) partially override xaringan's default CSS instead of fully copying the whole thing and adding a few lines of CSS in it: https://slides.yihui.name/xaringan/#36 The YAML setting would look like this:

output:
  xaringan::moon_reader:
    css: [default-fonts, default, primary.css]

where primary.css only contains your .primary CSS rules.

And also BTW, you may check out the four-backtick rule for how to post valid Rmd examples in Github issues instead of using the awkward \``` :)

[sctyner]

    background-size: contain;
    background-position: 0 0;

was the solution. Thanks!

The whole shebang contains multiple CSS files but just did that for minimally repro example. :)

And, I totally forgot about the four-backtick rule. Thanks again. 👍 (@srvanderplas)