JavaScriptをベースにブラウザでプレゼンテーションスライドを作るにはReveal.jsが便利です。今回は、スライドに背景画像を追加する方法を紹介します。
sectionに追加パラメータを設定する。
背景画像を追加したいsectionにdata-background="ファイル名"を追加設定するだけです。
<section data-background = "testimg.jpg"> ここに文字を書きます。 </section>
背景画像を追加する前後でスライドを比べて見ます。
背景画像なし
背景画像あり
やはり背景画像を設定したほうがインパクトが出せますね。
そのほかに小さい画像を繰り返し提示する方法もあります。
<section data-background = "testimg2.jpg" data-background-size = "100px" data-background-repeat = "repeat"> ここに文字を書きます。 </section>
こんな感じのスライドになります。