jnobuyukiのブログ

JavaScriptとR言語を中心に研究活動に役立つwebアプリケーション技術について考えていきます。twitter ID: @j_nobuyuki

Reveal.jsでスライドの背景画像を設定する

JavaScriptをベースにブラウザでプレゼンテーションスライドを作るにはReveal.jsが便利です。今回は、スライドに背景画像を追加する方法を紹介します。

sectionに追加パラメータを設定する。

背景画像を追加したいsectionにdata-background="ファイル名"を追加設定するだけです。

<section data-background = "testimg.jpg">
  ここに文字を書きます。
</section>

背景画像を追加する前後でスライドを比べて見ます。

f:id:jnobuyuki:20141017132332j:plain

背景画像なし

f:id:jnobuyuki:20141017132340j:plain

背景画像あり

やはり背景画像を設定したほうがインパクトが出せますね。
そのほかに小さい画像を繰り返し提示する方法もあります。

<section data-background = "testimg2.jpg" data-background-size = "100px" data-background-repeat = "repeat">
  ここに文字を書きます。
</section>

こんな感じのスライドになります。
f:id:jnobuyuki:20141017132859j:plain