ホーム＞コース別ガイド一覧＞背景に画像を設定しよう！
背景に画像を設定しよう！（background-image プロパティ） |
   |
使用プロパティ セレクタ { background-image: url(画像のURL); }
CSS一覧プロパティ辞典 … background-image プロパティ
background-image プロパティを使うと、HTML要素の背景に敷き詰める画像を指定できます。値には「url(画像ファイルのURL)」や「none」を指定できます。「none」というキーワードを指定した場合には、背景画像は表示されません。
背景画像関連のプロパティ！
背景画像関連のプロパティは background-repeat プロパティや background-position プロパティなどがあります。 background-image プロパティは単純に要素の背景に敷き詰められるだけですが、background-repeat プロパティは横方向や縦方向だけに敷き詰められたり、画像を一つだけ配置したりできます。また、background-image プロパティに background-repeat プロパティと background-position プロパティを組み合わせて使えば、背景画像を好きな位置に１つだけ配置できるようになります。これらのプロパティを使用することでデザインの幅が広がります！
その他に、background-attachment プロパティ や background プロパティがあり、background-attachment プロパティはページをスクロールしても、内容はスクロールするが、背景画像は動かずに元の位置にとどまって見える効果が表現でき、background プロパティはこれらに background-color プロパティも含め、５つのプロパティをまとめて記述することができます。
使用例
background-image プロパティを使用し、h1 要素の背景にする画像を敷き詰めよう！画像は同じフォルダ内のファイルを参照するとして、相対パスで指定しているので、ファイル名（ここでは「haikei.gif」）をそのまま記述します。なお、使用画像は
を使用しています。
記述例
<html>
<head>
<title>一人暮らしの前向き料理</title>
<style type="text/css">
body { background-color: moccasin; }
h1 {
text-align: center;
background-imege: url(haikei.gif);
}
span { font-weight: bold; }
p {
text-align: center;
line-height: 1.7em;
}
p.copy { font-family: "Ｍ ＳＰ明朝",serif; }
</style>
</head>
<body>
<h1>簡単に作れるワンポイント料理</h1>
<p>料理を少しおいしくするための<br>
ワンポインを紹介します！</p>
<p>おいしいチャーハンの作り方</p>
<p class="copy">Copyright © 2007 TomMY. All Rights Reserved.</p>
</body>
</html>
|
|
使用例の表示
[background-imageプロパティ適応前のブラウザでの表示例]
| 一人暮らしの前向きな料理 |
簡単に作れるワンポイント料理
料理を少しおいしくするための
ワンポイントを紹介します！
おいしいチャーハンの作り方
Copyright © 2007 TomMY. All Rights Reserved. |
|
 |
[background-imageプロパティ適応後のブラウザでの表示例]
| 一人暮らしの前向きな料理 |
簡単に作れるワンポイント料理
料理を少しおいしくするための
ワンポイントを紹介します！
おいしいチャーハンの作り方
Copyright © 2007 TomMY. All Rights Reserved. |
|
このように、要素の背景に画像が敷き詰められます！これだけでも印象が華やかになりますね！
