日文文書処理

ウェブページの作成

背景画像を設定する

ここでは、〈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]+クリック)してディスクに保存できる。

→→ サンプル背景画像 ←←

ページの先頭へ↑
←ひとつ前に戻る
目次へ
トップページへ