Using background images for slides

You can define background images for slides, even for the title slide. You have two options when it comes to the image source:

The image is available somewhere online. Just copy its URL and use it.
You create an data URL of the image and use it. No online-hosted image needed, the image will be right in your CSS.

Background image for the title slide

Here is a code example for adding a background image with custom CSS in the Theme Editor

CSS

.reveal .title-slide .slide-background-content {
    background-image: url("https://images.unsplash.com/photo-1477738224882-4eba549a81ea?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80");
    background-size: cover;
    background-color: #000;
}

What this CSS code does:

It targets the first slide background container with ".reveal .title-slide .slide-background-content".
"background-image: url('...');" adds the URL of your image to the selected element
"background-size: cover;" scales the image so big, that it covers the whole element, no matter what aspect ratio your screen and image is
"background-color: #000;" adds a fallback color if your image is not available any more

Filling the space of header and footer on the title slide

When you have activated headers or footers, they are hidden on the title slide - but the space they usually use stays empty. This leads to empty bars above and below your background image.

To fix this and make your background image fill the whole screen, use the following CSS code:

CSS

.slide-header.position-title ~ .reveal-embedding {
  top: 0 !important;
  bottom: 0 !important;
}

Background image for all “normal” slides

Just use the same code as above, but change the CSS selector to .reveal .slide-background-content.