background:背景に関する指定をまとめて行う
初期値 | 各プロパティの初期値 |
適用対象 | 全ての要素、::first-letter および::first-line |
継承 | しない |
アニメーション | 各プロパティの値に基づく |
対応ブラウザ | caniuseで確認 |
backgroundプロパティの説明
background
は、背景に関するスタイルを一括で指定するショートハンド・プロパティです。背景色や背景画像を指定する祭に、各プロパティを個別に用意することなく同時に記述できます。
background
では、以下のプロパティの値を操作できます。複数の値を指定する場合は、半角スペースで区切って列記します。
background-attachment
:背景のスクロール指定background-clip
:背景の拡張範囲指定background-color
:背景色の指定background-image
:背景画像の指定background-origin
:背景の配置基準指定background-position
:背景の位置指定background-repeat
:背景の繰り返し指定background-size
:背景の寸法指定
backgroundに指定できる値
- <attachment>
- 背景をスクロールに合わせて移動するか固定するかを指定します。
background-attachment
で使用できる値を指定して下さい。 - <box>
- 背景を表示する領域や開始の基点を指定します。
background-origin
およびbackground-clip
で使用できる値を指定して下さい。 - <background-color>
- 背景の色を指定します。
background-color
で使用できる値を指定して下さい。 - <bg-image>
- 背景に表示する画像を指定します。
background-image
で使用できる値を指定して下さい。 - <position>
- 背景画像の表示位置を指定します。
background-position
で使用できる値を指定して下さい。 - <repeat-style>
- 背景画像の繰り返しを指定します。
background-repeat
で使用できる値を指定して下さい。 - <bg-size>
- 背景画像の寸法を指定します。
background-size
で使用できる値を指定して下さい。
backgroundの使い方とサンプル
background
プロパティの構文は以下の通りです。
CSS
/* <background-color>値 */
background: red;
background: #ff0000;
/* <bg-image>値 */
background: url("bg.png");
/* 複数の値 */
background: red padding-box;
background: url("bg.png") repeat-x;
background: url("bg.png") center/50% no-repeat;
/* グローバル値 */
background: inherit;
background: initial;
background: revert;
background: unset;
backgroundの実例
background
プロパティを使うメリットは、複数の値を同時に編集できることです。以下の例では、親子関係の要素にそれぞれ別の背景を指定した場合のスタイルを確認できます。
CSS
.samp_box {
padding: 20px;
border: 5px dashed #999;
background: #0cf content-box;
}
#item {
width: 150px;
height: 100px;
margin: 20px auto;
padding: 10px;
border: 10px dashed #039;
background: url(../images/sample_bg_stripe.png) repeat;
text-align: center;
}
HTML
<div class="samp_box">
<div id="item">Item</div>
</div>
表示確認
backgroundに関連するCSSプロパティ
背景(バックグラウンド) | |
---|---|
background | 背景に関する指定をまとめて行う |
background-attachment | 背景画像の固定・移動を指定する |
background-blend-mode | 背景色や背景画像の描画モードを指定する |
background-clip | 背景の描画範囲を指定する |
background-color | 背景色を指定する |
background-image | 背景画像やグラデーションを指定する |
background-origin | 背景画像を配置する基準点を指定する |
background-position | 背景画像の表示開始位置を指定する |
background-repeat | 背景画像の繰り返しを指定する |
background-size | 背景画像を表示するサイズ(大きさ)を指定する |
backdrop-filter | 要素の背後領域にぼかしや色変化などのフィルタ効果を与える |