diff --git a/README.md b/README.md
index f03ae0f23068aeeccf1f05229cf0a040a162a176..99fc651aff732df0037a40fe7c317172e93e7609 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 f6759777ce0c467bb36b52c44d7412e5abc3755a..5f501b12cde295d084659f1823699224b3946d2b 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 fba248e75ffff1d7042e9ee36a2f3d8cebb2ba17..983e587b7c67bc9fa2c003a56d86ac0cb10594c7 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;
 }