allow control over background color when using images (#453)

css/reveal.css

@@ -1245,8 +1245,8 @@ body {
 	left: 0;
 }
 
-.no-transition,
-.no-transition * {
+.reveal .no-transition,
+.reveal .no-transition * {
 	-webkit-transition: none !important;
 	   -moz-transition: none !important;
 	    -ms-transition: none !important;

js/reveal.js

@@ -249,7 +249,8 @@ var Reveal = (function(){
 
 	/**
 	 * Creates the slide background elements and appends them
-	 * to the background container.
+	 * to the background container. One element is created per
+	 * slide no matter if the given slide has visible background.
 	 */
 	function createBackgrounds() {
 
@@ -264,6 +265,7 @@ var Reveal = (function(){
 			var data = {
 				background: slide.getAttribute( 'data-background' ),
 				backgroundSize: slide.getAttribute( 'data-background-size' ),
+				backgroundColor: slide.getAttribute( 'data-background-color' ),
 				backgroundRepeat: slide.getAttribute( 'data-background-repeat' ),
 				backgroundPosition: slide.getAttribute( 'data-background-position' )
 			};
@@ -272,7 +274,7 @@ var Reveal = (function(){
 
 			if( data.background ) {
 				// Auto-wrap image urls in url(...)
-				if( /\.(png|jpg|jpeg|gif|bmp|)$/gi.test( data.background ) ) {
+				if( /\.(png|jpg|jpeg|gif|bmp)$/gi.test( data.background ) ) {
 					element.style.backgroundImage = 'url('+ data.background +')';
 				}
 				else {
@@ -282,6 +284,7 @@ var Reveal = (function(){
 
 			// Additional and optional background properties
 			if( data.backgroundSize ) element.style.backgroundSize = data.backgroundSize;
+			if( data.backgroundColor ) element.style.backgroundColor = data.backgroundColor;
 			if( data.backgroundRepeat ) element.style.backgroundRepeat = data.backgroundRepeat;
 			if( data.backgroundPosition ) element.style.backgroundPosition = data.backgroundPosition;
 

test/background.html

@@ -54,7 +54,7 @@
 					<h2>Background image</h2>
 				</section>
 
-				<section data-background="assets/image2.png" data-background-size="100px" data-background-repeat="repeat">
+				<section data-background="assets/image2.png" data-background-size="100px" data-background-repeat="repeat" data-background-color="#111" style="background: rgba(255,255,255,0.9)">
 					<h2>Background image</h2>
 					<code>data-background-size="100px" data-background-repeat="repeat"</code>
 				</section>