@@ -183,25 +183,34 @@ <h2>Themes</h2>
183
183
</ section >
184
184
185
185
< section >
186
- < section data-state ="alert ">
187
- < h2 > Global State</ h2 >
186
+ < h2 > Global State</ h2 >
187
+ < p >
188
+ Set < code > data-state="something"</ code > on a slide and < code > "something"</ code >
189
+ will be added as a class to the document element when the slide is open. This lets you
190
+ apply broader style changes, like switching the background.
191
+ </ p >
192
+ </ section >
193
+
194
+ < section >
195
+ < section data-background ="#007777 ">
196
+ < h2 > Slide Backgrounds</ h2 >
188
197
< p >
189
- Set < code > data-state="something"</ code > on a slide and < code > "something"</ code >
190
- will be added as a class to the document element when the slide is open. This lets you
191
- apply broader style changes, like switching the background.
198
+ Set < code > data-background="#007777"</ code > on a slide to change the full page background to the given color. All CSS color formats are supported.
192
199
</ p >
193
200
< a href ="# " class ="image navigate-down ">
194
201
< img width ="178 " height ="238 " src ="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png " alt ="Down arrow ">
195
202
</ a >
196
203
</ section >
197
- < section data-state ="blackout ">
198
- < h2 > "blackout"</ h2 >
204
+ < section data-background ="https://s3.amazonaws.com/hakim-static/reveal-js/cornify.gif ">
205
+ < h2 > Image Backgrounds</ h2 >
206
+ < pre > < code > <section data-background="image.png"></ code > </ pre >
199
207
< a href ="# " class ="image navigate-down ">
200
208
< img width ="178 " height ="238 " src ="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png " alt ="Down arrow ">
201
209
</ a >
202
210
</ section >
203
- < section data-state ="soothe ">
204
- < h2 > "soothe"</ h2 >
211
+ < section data-background ="https://s3.amazonaws.com/hakim-static/reveal-js/cornify.gif " data-background-repeat ="repeat " data-background-size ="100px ">
212
+ < h2 > Repeated Image Backgrounds</ h2 >
213
+ < pre > < code style ="word-wrap: break-word; "> <section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"></ code > </ pre >
205
214
< a href ="# " class ="image navigate-next ">
206
215
< img width ="178 " height ="238 " src ="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png " alt ="Up arrow " style ="-webkit-transform: rotate(-90deg); ">
207
216
</ a >
0 commit comments