Feb. 15th,2021
プロパティについて
概要
| 初期値 |
“background-color: transparent;” “background-image: none;” “background-position: 0% 0%;” “background-size: auto;” “background-repeat: repeat;” “background-attachment: scroll;” “background-origin: padding-box;” “background-clip: background-clip;” |
| 適用対象 | すべての要素 |
| 継承 | No |
| パーセント値 | 一括指定が対象とする各プロパティの定義に依る |
| 計算値 | 一括指定が対象とする各プロパティの定義に依る |
| アニメーション | 一括指定が対象とする各プロパティの定義に依る |
“background”プロパティは要素の背景に使用する色や背景、背景画像の大きさや配置位置などを指定する以下のプロパティの一括指定プロパティです。
- “background-color”プロパティ
- “background-image”プロパティ
- “background-position”プロパティ
- “background-size”プロパティ
- “background-repeat”プロパティ
- “background-attachment”プロパティ
- “background-origin”プロパティ
- “background-clip”プロパティ
要素の背景は既定ではボーダー・ボックスに描画されます。また、要素にボーダーやコンテンツがあればそれらの背後に描画されます。
サンプルコード
div { background: rgb(204,153,204) url(background_sample.png) repeat-x center fixed content-box;}
値
| 値 | 説明 |
|---|---|
| “<bg-layer>”値、“<final-bg-layer>”値 | |
| <background-color> | “background-color”プロパティの値 |
| <bg-image> | “background-image”プロパティの値 |
| <bg-position> | “background-position”プロパティの値 |
<bg-size> |
“background-size”プロパティの値 |
| <repeat-style> | “background-repeat”プロパティの値 |
| <attachment> | “background-attachment”プロパティの値 |
| <box> |
“background-origin”プロパティ、“background-clip”プロパティの値 |
| 他の値 | |
| 共通キーワード | |
必要な値をホワイトスペースで区切って、“<background-color>”値、“<bg-image>”値、“<bg-position>”値、“<bg-size>”値、“<repeat-style>”値、“<attachment>”値は1個ずつ、“<box>”値は1個もしくは2個指定できます。
初期値のままで良い値は省略できます。また、値を記述する順番は自由ですが、“<bg-size>”値は“<bg-position>”値の直後にスラッシュ(“/”)で区切って記述しなければなりません。
“<box>”の指定が2個である場合は、1個目の値は背景画像の配置領域(“background-origin”プロパティ)、2個目の値は背景の表示領域(“background-clip”プロパティ)を指定します。“<box>”の指定が1個の場合はその値が背景画像の配置領域と背景の表示領域の両方を設定します。
div { background: 〚“<background-color>”値〛 〚“<bg-image>”値〛 〚“<bg-position>”値〛/〚“<bg-size>”値〛 〚“<repeat-style>”値〛 〚“<attachment>”値〛 〚“<box>”値〛 〚“<box>”値〛;}
複数の画像を背景に指定する
値のセットを“,(コンマ)”で区切って並べて記述することで背景に複数のレイヤーを設定することができます。最初に記述したレイヤーが最前面、最後に記述したレイヤーが最背面になるように、重ねて描画されます。
それぞれのレイヤーについて必要な値を任意で記述することができますが、“<background-color>”値は最背面となるレイヤーにのみ指定することができます。
background:
〚一番手前の背景の“<bg-image>”値〛 〚一番手前の背景の“<bg-position>”値〛/〚一番手前の背景の“<bg-size>”値〛 〚一番手前の背景の“<repeat-style>”値〛 〚一番手前の背景の“<attachment>”値〛 〚一番手前の背景の“<box>”値〛,
〚手前から2番目の背景の“<bg-image>”値〛 〚手前から2番目の背景の“<bg-position>”値〛/〚手前から2番目の背景の“<bg-size>”値〛 〚手前から2番目の背景の“<repeat-style>”値〛 〚手前から2番目の背景の“<attachment>”値〛 〚手前から2番目の背景の“<box>”値〛,
〚手前から3番目の背景の“<bg-image>”値〛 〚手前から3番目の背景の“<bg-position>”値〛/〚手前から3番目の背景の“<bg-size>”値〛 〚手前から3番目の背景の“<repeat-style>”値〛 〚手前から3番目の背景の“<attachment>”値〛 〚手前から3番目の背景の“<box>”値〛,
...,
〚“<background-color>”値〛 〚一番奥の背景の“<bg-image>”値〛 〚一番奥の背景の“<bg-position>”値〛/〚一番奥の背景の“<bg-size>”値〛 〚一番奥の背景の“<repeat-style>”値〛 〚一番奥の背景の“<attachment>”値〛 〚一番奥の背景の“<box>”値〛;
使用例
背景を指定する
div {
10px dotted rgb(0,0,0);
padding: 10px;
background: rgb(204,153,204) url(background_sample.png) repeat-y left scroll content-box;
overflow: scroll;
}
春は曙。やうやう白くなりゆく山際、すこしあかりて、紫だちたる雲の細くたなびきたる。
夏は夜。月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。
秋は夕暮。夕日のさして山端いと近くなりたるに、烏の寝所へ行くとて、三つ四つ二つなど、飛び行くさへあはれなり。まして雁などのつらねたるが、いと小さく見ゆる、いとをかし。日入りはてて、風の音、蟲の音など。
冬はつとめて。雪の降りたるは、いふべきにもあらず。霜などのいと白きも、またさらでも いと寒きに、火など急ぎおこして、炭持てわたるも、いとつきづきし。昼になりて、ぬるくゆるびもていけば、炭櫃・火桶の火も、白き灰がちになりぬるは わろし。
複数の背景画像を指定する
div {
10px dotted rgb(0,0,0);
padding: 10px;
background: url(background_sample.png) no-repeat left/50px padding-box,url(background_sample2.png) repeat-y center border-box,rgb(204,153,204) url(background_sample3.png) repeat-x center fixed content-box;
overflow: scroll;
}
春は曙。やうやう白くなりゆく山際、すこしあかりて、紫だちたる雲の細くたなびきたる。
夏は夜。月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。
秋は夕暮。夕日のさして山端いと近くなりたるに、烏の寝所へ行くとて、三つ四つ二つなど、飛び行くさへあはれなり。まして雁などのつらねたるが、いと小さく見ゆる、いとをかし。日入りはてて、風の音、蟲の音など。
冬はつとめて。雪の降りたるは、いふべきにもあらず。霜などのいと白きも、またさらでも いと寒きに、火など急ぎおこして、炭持てわたるも、いとつきづきし。昼になりて、ぬるくゆるびもていけば、炭櫃・火桶の火も、白き灰がちになりぬるは わろし。
