ここでは、〈body要素〉や〈段落要素〉、〈見出し要素〉などに、背景画像background imageを設定する方法を学ぶ。
background-imageプロパティ
スタイルシートstyle sheetを使えば、〈body要素〉のほか、〈段落要素〉、〈見出し要素〉、〈table要素〉、〈div要素〉、〈span要素〉などに任意の背景画像を設定することができる。
ある要素に背景画像を設定するには、「background-imageプロパティ」を用いる。"background-imageプロパティ"は、次のように記述する。
background-image: url("設定する画像ファイルの場所")
設定する画像ファイルの場所は、CSSファイルから見た場所を指定する。たとえば、CSSファイルと同じディレクトリdirectoryにある「back.png」という画像ファイルを指定する場合には「url("back.png")」または「url("./back.png")」と書けば良い【参考:href属性の指定】。
たとえば、〈body要素〉の全体に「back.png」という画像ファイルを設定するには、次のように書けば良い(「back.png」がCSSファイルと同じディレクトリにある場合)。背景画像用の画像のサイズが小さくても、縦方向と横方向に自動的に繰り返して表示される(要素全体に表示される)。
body {
background-image: url("./back.png");}
背景画像の表示例
ここでは、サンプル背景画像(薄い灰色の横縞)を〈div要素〉の背景画像として設定した例を示す。
〈div要素〉にサンプル背景画像を背景画像として指定すると、次のような表示になる。
表示見本:
〈div要素〉にサンプル背景画像を背景画像として指定した場合
なお、ここで使ったサンプル背景画像は、以下のハイパリンクを右クリック(または[control]+クリック)してディスクに保存できる。
→→ サンプル背景画像 ←←
→ 連絡先の表示を変更する 〔prev〕