diff --git a/README.md b/README.md
index f03ae0f2..99fc651a 100644
--- a/README.md
+++ b/README.md
@@ -602,9 +602,9 @@ Automatically plays a full size video behind the slide.
 ```
 
 ##### Iframe Backgrounds
-Embeds a web page as a background. Note that since the iframe is in the background layer, behind your slides, it is not possible to interact with the embedded page.
+Embeds a web page as a slide background that covers 100% of the reveal.js width and height. The iframe is in the background layer, behind your slides, and as such it's not possible to interact with it by default. To make your background interactive, you can add the `data-background-interactive` attribute.
 ```html
-<section data-background-iframe="https://slides.com">
+<section data-background-iframe="https://slides.com" data-background-interactive>
 	<h2>Iframe</h2>
 </section>
 ```
diff --git a/css/reveal.css b/css/reveal.css
index f6759777..5f501b12 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -377,7 +377,9 @@ body {
   opacity: 1; }
 
 .reveal .slides > section:empty,
-.reveal .slides > section > section:empty {
+.reveal .slides > section > section:empty,
+.reveal .slides > section[data-background-interactive],
+.reveal .slides > section > section[data-background-interactive] {
   pointer-events: none; }
 
 .reveal.center,
diff --git a/css/reveal.scss b/css/reveal.scss
index fba248e7..983e587b 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -446,7 +446,9 @@ body {
 }
 
 .reveal .slides>section:empty,
-.reveal .slides>section>section:empty {
+.reveal .slides>section>section:empty,
+.reveal .slides>section[data-background-interactive],
+.reveal .slides>section>section[data-background-interactive] {
 	pointer-events: none;
 }