background images now work in overview mode #1088

css/reveal.css

@@ -669,6 +669,14 @@ body {
   background: none;
   overflow: visible; }
 
+.reveal.overview .backgrounds .slide-background {
+  opacity: 1;
+  visibility: visible; }
+
+.reveal.overview .backgrounds .slide-background, .reveal.overview-deactivating .backgrounds .slide-background {
+  -webkit-transition: none !important;
+          transition: none !important; }
+
 /*********************************************
  * PAUSED MODE
  *********************************************/

css/reveal.scss

@@ -786,6 +786,16 @@ body {
 }
 
 
+.reveal.overview .backgrounds .slide-background {
+	opacity: 1;
+	visibility: visible;
+}
+.reveal.overview .backgrounds .slide-background,
+.reveal.overview-deactivating .backgrounds .slide-background {
+	transition: none !important;
+}
+
+
 /*********************************************
  * PAUSED MODE
  *********************************************/

js/reveal.js

@@ -1642,31 +1642,41 @@
 			dom.wrapper.classList.add( 'overview' );
 			dom.wrapper.classList.remove( 'overview-deactivating' );
 
-			var horizontalSlides = dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR );
+			// Move the backgrounds element into the slide container to
+			// that the same scaling is applied
+			dom.slides.appendChild( dom.background );
+
+			var horizontalSlides = dom.wrapper.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ),
+				horizontalBackgrounds = dom.background.childNodes;
 
 			for( var i = 0, len1 = horizontalSlides.length; i < len1; i++ ) {
 				var hslide = horizontalSlides[i],
+					hbackground = horizontalBackgrounds[i],
 					hoffset = config.rtl ? -105 : 105;
 
 				hslide.setAttribute( 'data-index-h', i );
 
 				// Apply CSS transform
 				transformElement( hslide, 'translateZ(-'+ depth +'px) translate(' + ( ( i - indexh ) * hoffset ) + '%, 0%)' );
+				transformElement( hbackground, 'translateZ(-'+ depth +'px) translate(' + ( ( i - indexh ) * hoffset ) + '%, 0%)' );
 
 				if( hslide.classList.contains( 'stack' ) ) {
 
-					var verticalSlides = hslide.querySelectorAll( 'section' );
+					var verticalSlides = hslide.querySelectorAll( 'section' ),
+						verticalBackgrounds = hbackground.querySelectorAll( '.slide-background' );
 
 					for( var j = 0, len2 = verticalSlides.length; j < len2; j++ ) {
 						var verticalIndex = i === indexh ? indexv : getPreviousVerticalIndex( hslide );
 
-						var vslide = verticalSlides[j];
+						var vslide = verticalSlides[j],
+							vbackground = verticalBackgrounds[j];
 
 						vslide.setAttribute( 'data-index-h', i );
 						vslide.setAttribute( 'data-index-v', j );
 
 						// Apply CSS transform
 						transformElement( vslide, 'translate(0%, ' + ( ( j - verticalIndex ) * 105 ) + '%)' );
+						transformElement( vbackground, 'translate(0%, ' + ( ( j - verticalIndex ) * 105 ) + '%)' );
 
 						// Navigate to this slide on click
 						vslide.addEventListener( 'click', onOverviewSlideClicked, true );
@@ -1709,6 +1719,9 @@
 
 			dom.wrapper.classList.remove( 'overview' );
 
+			// Move the background element back out
+			dom.wrapper.appendChild( dom.background );
+
 			// Temporarily add a class so that transitions can do different things
 			// depending on whether they are exiting/entering overview, or just
 			// moving from slide to slide
@@ -1718,14 +1731,18 @@
 				dom.wrapper.classList.remove( 'overview-deactivating' );
 			}, 1 );
 
-			// Select all slides
+			// Clean up changes made to slides
 			toArray( dom.wrapper.querySelectorAll( SLIDES_SELECTOR ) ).forEach( function( slide ) {
-				// Resets all transforms to use the external styles
 				transformElement( slide, '' );
 
 				slide.removeEventListener( 'click', onOverviewSlideClicked, true );
 			} );
 
+			// Clean up changes made to backgrounds
+			toArray( dom.background.querySelectorAll( '.slide-background' ) ).forEach( function( background ) {
+				transformElement( background, '' );
+			} );
+
 			slide( indexh, indexv );
 
 			cueAutoSlide();