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

.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;
}
CSS

What this CSS code does:

  1. It targets the first slide background container with ".reveal .title-slide .slide-background-content".

  2. "background-image: url('...');" adds the URL of your image to the selected element

  3. "background-size: cover;" scales the image so big, that it covers the whole element, no matter what aspect ratio your screen and image is

  4. "background-color: #000;" adds a fallback color if your image is not available any more

Background image for all “normal” slides

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