Skip to content

Commit ff35847

Browse files
author
Hakim El Hattab
committed
update example deck to use slide backgrounds (hakimel#453)
1 parent 0ce57f1 commit ff35847

File tree

1 file changed

+18
-9
lines changed

1 file changed

+18
-9
lines changed

index.html

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -183,25 +183,34 @@ <h2>Themes</h2>
183183
</section>
184184

185185
<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>
188197
<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.
192199
</p>
193200
<a href="#" class="image navigate-down">
194201
<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
195202
</a>
196203
</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>&lt;section data-background="image.png"&gt;</code></pre>
199207
<a href="#" class="image navigate-down">
200208
<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
201209
</a>
202210
</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;">&lt;section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"&gt;</code></pre>
205214
<a href="#" class="image navigate-next">
206215
<img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="-webkit-transform: rotate(-90deg);">
207216
</a>

0 commit comments

Comments
 (0)