diff --git a/exampleSite/content/home/shortcodes/slide.md b/exampleSite/content/home/shortcodes/slide.md
index 2b38fc1..c4cb123 100644
--- a/exampleSite/content/home/shortcodes/slide.md
+++ b/exampleSite/content/home/shortcodes/slide.md
@@ -44,7 +44,7 @@ Add the shortcode above the slide's content, below the `---`.
---
-{{< slide background="#FF4081" >}}
+{{< slide background-color="#FF4081" >}}
## Custom slide 2
@@ -53,7 +53,7 @@ Add the shortcode above the slide's content, below the `---`.
```markdown
---
-{{* slide background="#FF4081" */>}}
+{{* slide background-color="#FF4081" */>}}
## Custom slide 2
@@ -62,6 +62,24 @@ Add the shortcode above the slide's content, below the `---`.
---
+{{< slide background-image="/images/alex-litvin-790876-unsplash.jpg" >}}
+
+## Custom slide 3
+
+This slide has a background image.
+
+```markdown
+---
+
+{{* slide background-image="/images/alex-litvin-790876-unsplash.jpg" */>}}
+
+---
+```
+
+(credit Alex Litvin)
+
+---
+
{{< slide id="custom-slide" >}}
💡 Tip: Setting a slide's `id` attribute makes it easy to link to from other parts of the presentation.
diff --git a/exampleSite/layouts/partials/home/reveal-hugo/head.html b/exampleSite/layouts/partials/home/reveal-hugo/head.html
index e8a1607..c99b743 100644
--- a/exampleSite/layouts/partials/home/reveal-hugo/head.html
+++ b/exampleSite/layouts/partials/home/reveal-hugo/head.html
@@ -28,4 +28,12 @@
.reveal section.side-by-side h1:nth-of-type(2) {
right: 25%;
}
+.reveal section[data-background-image] a,
+.reveal section[data-background-image] p,
+.reveal section[data-background-image] h2 {
+ color: white;
+}
+.reveal section[data-background-image] a {
+ text-decoration: underline;
+}
diff --git a/exampleSite/static/images/alex-litvin-790876-unsplash.jpg b/exampleSite/static/images/alex-litvin-790876-unsplash.jpg
new file mode 100644
index 0000000..ff0712b
Binary files /dev/null and b/exampleSite/static/images/alex-litvin-790876-unsplash.jpg differ