■概要
background属性はタグの背景を指定するもので、font属性と似たようで、詳細な属性を同時に使える属性です。
以下のような属性を使えます。
| background-color | 背景色 |
| background-image | 背景画像 |
| background-repeat | 背景画像の繰り返し |
| background-position | 背景画像の位置 |
■background-color
背景色を意味します。値はcolor属性のフォーマットを使用します。
タグのサイズが「0」より少ない場合は背景色は表示されません。
■例
<style>
#box1-1{ background-color: green; }
#box1-2{ background-color: #FF00CC; width: 200px }
</style>
<div id=”box1-1″>四角形四角形1</div>
<div id=”box1-2″>四角形2<br>四角形</div>
出力結果
四角形四角形1四角形2
四角形
■background-image
背景イメージを設定します。イメージの指定はbackground-image: url(“イメージのパス”)という形にします。
イメージの大きさは、コンテナの大きさに合わせて表示されるのではなく、イメージよりコンテナが大きい場合は繰り返して表示します。
■例
<style>
#box2-1 { width: 150px; height: 130px; background-image: url(“/images/planet.jpg”); }
#box2-2 { width: 450px; height: 260px; margin-top: 30px; background-image: url(“/images/planet.jpg”); }
</style>
<div id=”box2-1″></div>
<div id=”box2-2″></div>
出力結果
■background-repeat
イメージの表示を繰り返すかを指定します。
■例
<style>
.abox{
width: 450px;
height: 160px;
margin-bottom: 15px;
background-image: url(“/images/planet.jpg”);
border: 1px solid #AAA;
}
#box3-1{ background-repeat: no-repeat }
#box3-2{ background-repeat: repeat-x }
#box3-3{ background-repeat: repeat-y }
#box3-4{ background-repeat: repeat }
</style>
<div id=”box3-1″ class=”abox”></div>
<div id=”box3-2″ class=”abox”></div>
<div id=”box3-3″ class=”abox”></div>
<div id=”box3-4″ class=”abox”></div>
出力結果
■background-position
background-imageは、基本左上からイメージを表示します。
background-position属性を使用するとイメージの座標を指定することができます。
margin, padding属性と似たような感じで、空白を基準にx, y座標を指定します。
pxだけじゃなく、left, top, center, bottom, rightなどの定数も使えます。
■例
<style>
.abox{
width: 500px;
height: 160px;
margin-bottom: 15px;
background-image: url(“/images/planet.jpg”);
border: 1px solid #AAA;
}
#box4-1 { background-position:center center; background-repeat: no-repeat; }
#box4-2 { background-position:-100px -60px; background-repeat: repeat-x; }
#box4-3 { background-position:40px -90px; background-repeat: repeat-y; }
#box4-4 { background-position:30px right; background-repeat: repeat; }
</style>
<div id=”box4-1″ class=”abox”></div>
<div id=”box4-2″ class=”abox”></div>
<div id=”box4-3″ class=”abox”></div>
<div id=”box4-4″ class=”abox”></div>
出力結果
■background
■使用方法
#box{ background: #09C url(‘planet.jpg’) no-repeat 10px center; }
■例
<html>
<head>
<style>
#box5{
width: 300px;
height: 100px;
background: green url(‘/images/planet.jpg’) no-repeat center center;
}
</style>
</head>
<body>
<div id=”box5″></div>
</body>
</html>
出力結果
