update background test, documented slide backgrounds in readme (#453)

diff --git a/README.md b/README.md
index 85e7e5c051086e9d342b81b481707e0d087df262..a496f5d4f4e73f016318c5ac2ac04c6df8973593 100644 (file)
--- a/README.md
+++ b/README.md
@@ -106,6 +106,9 @@ Reveal.initialize({
        // Transition speed
        transitionSpeed: 'default', // default/fast/slow
 
+       // Transition style for full page backgrounds
+       backgroundTransition: 'default' // default/linear
+
 });
 ```
 
@@ -211,18 +214,6 @@ Reveal.getCurrentSlide();
 Reveal.getIndices(); // { h: 0, v: 0 } }
 ```
 
-### States
-
-If you set ``data-state="somestate"`` on a slide ``<section>``, "somestate" will be applied as a class on the document element when that slide is opened. This allows you to apply broad style changes to the page based on the active slide.
-
-Furthermore you can also listen to these changes in state via JavaScript:
-
-```javascript
-Reveal.addEventListener( 'somestate', function() {
-       // TODO: Sprinkle magic
-}, false );
-```
-
 ### Ready event
 
 The 'ready' event is fired when reveal.js has loaded all (synchronous) dependencies and is ready to start navigating.
@@ -245,6 +236,37 @@ Reveal.addEventListener( 'slidechanged', function( event ) {
 } );
 ```
 
+### States
+
+If you set ``data-state="somestate"`` on a slide ``<section>``, "somestate" will be applied as a class on the document element when that slide is opened. This allows you to apply broad style changes to the page based on the active slide.
+
+Furthermore you can also listen to these changes in state via JavaScript:
+
+```javascript
+Reveal.addEventListener( 'somestate', function() {
+       // TODO: Sprinkle magic
+}, false );
+```
+
+### Slide backgrounds
+
+Slides are contained withing a limited portion of the screen by default to allow them to fit any display and scale uniformly. You can apply full page background colors or images by applying a ```data-background``` attribute to your ```<section>``` elements. Below are a few examples.
+
+```html
+<section data-background="#ff0000">
+       <h2>All CSS color formats are supported, like rgba() or hsl().</h2>
+</section>
+<section data-background="http://example.com/image.png">
+       <h2>This slide will have a full-size background image.</h2>
+</section>
+<section data-background="http://example.com/image.png" data-background-size="100px" data-background-repeat="repeat">
+       <h2>This background image will be sized to 100px and repeated.</h2>
+</section>
+```
+
+Backgrounds transition using a fade animation by default. This can be changed to a linear sliding transition by passing ```backgroundTransition: 'linear'``` to the ```Reveal.initialize()``` call.
+
+
 ### Internal links
 
 It's easy to link between slides. The first example below targets the index of another slide whereas the second targets a slide with an ID attribute (```<section id="some-slide">```):

diff --git a/js/reveal.min.js b/js/reveal.min.js
index a3210634ed10504f1cbc509f507ea35d3c874d2f..aa2cf31163e952ec57e7f321a26b7b8347e22ffd 100644 (file)
--- a/js/reveal.min.js
+++ b/js/reveal.min.js
@@ -1,5 +1,5 @@
 /*!
- * reveal.js 2.5.0 (2013-06-04, 20:24)
+ * reveal.js 2.5.0 (2013-06-04, 20:58)
  * http://lab.hakim.se/reveal-js
  * MIT licensed
  *

diff --git a/test/background.html b/test/background.html
index 9c8d3fe1a698e19b27fb6f2ae315175cd83c686c..ccd374b6c7a5035f0b3e348710ba4e785750d3d8 100644 (file)
--- a/test/background.html
+++ b/test/background.html
@@ -50,13 +50,13 @@
                                        </section>
                                </section>
 
-                               <section data-background="assets/image1.png">
+                               <section data-background="assets/image1.png" style="background: rgba(255,255,255,0.9)">
                                        <h2>Background image</h2>
                                </section>
 
                                <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>
+                                       <pre>data-background-size="100px" data-background-repeat="repeat" data-background-color="#111"</pre>
                                </section>
                                
                        </div>