support for optional background property overrides (#453)

js/reveal.js

@@ -258,19 +258,30 @@ var Reveal = (function(){
 		// given slide
 		function _createBackground( slide, container ) {
 
-			var background = slide.getAttribute( 'data-background' );
+			var data = {
+				background: slide.getAttribute( 'data-background' ),
+				backgroundSize: slide.getAttribute( 'data-background-size' ),
+				backgroundRepeat: slide.getAttribute( 'data-background-repeat' ),
+				backgroundPosition: slide.getAttribute( 'data-background-position' )
+			};
+
 			var element = document.createElement( 'div' );
 
-			if( background ) {
+			if( data.background ) {
 				// Auto-wrap image urls in url(...)
-				if( /\.(png|jpg|jpeg|gif|bmp|)$/gi.test( background ) ) {
-					element.style.backgroundImage = 'url('+ background +')';
+				if( /\.(png|jpg|jpeg|gif|bmp|)$/gi.test( data.background ) ) {
+					element.style.backgroundImage = 'url('+ data.background +')';
 				}
 				else {
-					element.style.background = background;
+					element.style.background = data.background;
 				}
 			}
 
+			// Additional and optional background properties
+			if( data.backgroundSize ) element.style.backgroundSize = data.backgroundSize;
+			if( data.backgroundRepeat ) element.style.backgroundRepeat = data.backgroundRepeat;
+			if( data.backgroundPosition ) element.style.backgroundPosition = data.backgroundPosition;
+
 			container.appendChild( element );
 
 			return element;

test/background.html

@@ -54,8 +54,9 @@
 					<h2>Background image</h2>
 				</section>
 
-				<section data-background="assets/image2.png">
+				<section data-background="assets/image2.png" data-background-size="100px" data-background-repeat="repeat">
 					<h2>Background image</h2>
+					<code>data-background-size="100px" data-background-repeat="repeat"</code>
 				</section>
 				
 			</div>