Add example of using a background image

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
+
+<small>This slide has a background image.</small>
+
+```markdown
+---
+
+{{</* slide background-image="/images/alex-litvin-790876-unsplash.jpg" */>}}
+
+---
+```
+
+<small>(credit <a href="https://unsplash.com/@alexlitvin">Alex Litvin</a>)</small>
+
+---
+
 {{< slide id="custom-slide" >}}
 
 💡 Tip: Setting a slide's `id` attribute makes it easy to link to from other parts of the presentation.

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;
+}
 </style>