backgroundプロパティには、以下の種類があります。
background-color 色の指定 background-image 背景画像の指定 background-repeat 背景画像のリピート指定 background-attachment 背景画像のスクロールの指定 background-position 背景画像の位置の指定 background 各プロパティーをまとめて記載する時に使用
それでは、各プロパティーの使い方を見ていきましょう。
background-color
background-color は、背景色を指定します。
指定しない場合は、transparent(透明)となります。
.sample {
background-color: #000000;
}
background-image
background-image は、背景画像を指定します。
url()の中に画像のパスを指定します。
.sample {
background-image: url(image/logo.gif);
}
background-repeat
background-image は、背景画像の繰り返しを指定します。
repeat-x は横方向の繰り返し、repeat-y は、縦方向の繰り返しを意味します。
.sample {
background-image: url(image/logo.gif);
background-repeat: repeat-x;
}
繰り返さない場合は、no-repeat を指定します。
.sample {
background-image: url(image/logo.gif);
background-repeat: no-repeat;
}
background-attachment
background-attachment は、背景画像のスクロール方法を指定します。
fixedを指定すると、背景画像の位置が固定され、スクロールバーでブラウザを動かしても画像は動きません。
scrollを指定すると、スクロールバーでブラウザを動かした場合、背景画像も移動します。
.sample {
background-image: url(image/logo.gif);
background-repeat: no-repeat;
background-attachment: fixed;
}
background-position
background-position は、背景画像の位置を指定します。
top
上に表示
right
右に表示
bottom
下に表示
left
左に表示
center
中央に表示
数値で指定する場合は、横方向と縦方向の順で、数値にpxなどの単位をつけて指定します。
background-position の指定は様々な指定方法がありますので代表的なものを記載します。
.sample {
background-image: url(image/logo.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left top; /* 左上 */
}
.sample {
background-image: url(image/logo.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 20px 50px; /* 左上から右に20px, 下に50px */
}
background
background は、background関連のプロパティーをまとめて指定する省略系のプロパティーです。
background-color background-image background-repeat background-attachment background-position の順番でまとめて記載します。
.sample {
background: #000 url(image/logo.gif) no-repeat fixed left center;
}
[対象]
CSS3
CSS2.1
CSS2
