background CSS プロパティとは
トピック：プロパティが1つの宣言ですべてのバックグラウンドのプロパティを設定する 事ができる
プロパティ background
設定できるプロパティ：background-color（背景色）、background-image（背景イメージ）、background-position（バックグラウンドポジション）、background-size（背景サイズ）、background-repeat（バックグラウンドリピート）、background-origin（背景原点）、background-clip（背景クリップ）、background-attachment（背景アタッチメント）
実例 コード 1
サンプル コードを試すbody {
background: blue url("webref.jpg") no-repeat fixed center;
}
プロパティ
| デフォルト値・初期値 | 以下の一括指定の各プロパティとして
|
|---|
| 適用対象 : | 全要素。 ::first-letter and ::first-line にも適用されます。 |
|---|
| 継承 | 不可 |
|---|
| パーセンテージ : | 以下の一括指定の各プロパティとして
|
|---|
| メディア : | ビジュアル |
|---|
CSS Version | CSS1 ～ CSS3 |
|---|
| 計算値 | 以下の一括指定の各プロパティとして
|
|---|
| JavaScript 構文 | object.style.background="red url(webref.jpg) top left no-repeat" |
|---|
| アニメーションの種類 : | 以下の一括指定の各プロパティとして
|
|---|
| 正規順序 : | 形式文法における値の出現順 |
|---|
| CSSの構文 | background: bg-color, bg-image, position/bg-size, bg-repeat, bg-origin, bg-clip, bg-attachment, initial |inherit; |
|---|
| 値 | 説明 | CSS Version |
|---|
background-attachment | 背景画像を固定するか、ページの残りの部分をスクロールするかを指定します。 | 1 |
background-color | 使用する背景色を指定します。 | 1 |
background-clip | 背景画像のペイント領域を指定します。 | 3 |
background-image | 使用する1つ以上の背景画像を指定します。 | 1 |
background-origin | 背景画像の配置領域を指定します。 | 3 |
background-repeat | 背景画像を繰り返す方法を指定します。 | 1 |
background-position | 背景画像の位置を指定します。 | 1 |
background-size | 背景画像のサイズを指定します。 | 3 |
initial | このプロパティをデフォルト値に設定します。 | 3 |
inherit | 親要素からこのプロパティを継承します。 | 2 |
サポートするデスクトップ ブラウザ対応・互換性
| Property | Desktop 互換性 |
|---|
| background | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|
| 基本 サポート | フルサポート◯1 | フルサポート◯12 | フルサポート◯1 | フルサポート◯4 | フルサポート◯3.5 | フルサポート◯1 |
|---|
| 複数の背景 | フルサポート◯1 | フルサポート◯12 | フルサポート◯3.6 | フルサポート◯9 | フルサポート◯10.5 | フルサポート◯1.3 |
|---|
| 背景としてのSVGイメージ | フルサポート◯31 | フルサポート◯12 | フルサポート◯9 | フルサポート◯9 | フルサポート◯21 | フルサポート◯5.1 |
|---|
background-size | フルサポート◯21 | フルサポート◯12 | フルサポート◯9 | フルサポート◯9 | フルサポート◯21 | フルサポート◯5.1 |
|---|
background-origin | フルサポート◯21 | フルサポート◯12 | フルサポート◯22 | フルサポート◯9 | フルサポート◯21 | フルサポート◯5.1 |
|---|
background-clip | フルサポート◯21 | フルサポート◯12 | フルサポート◯22 | フルサポート◯9 | フルサポート◯21 | フルサポート◯5.1 |
|---|
サポートするモバイル ブラウザ対応・互換性
| Property | Mobile 互換性 |
|---|
| background | Android | Chrome for Android
| Edge Mobile | Firefox for Android
| Opera for Android
| iOS Safari | Samsung Internet |
|---|
| 基本 サポート | フルサポート◯2.1 | 不明 | フルサポート◯あり | フルサポート◯4 | フルサポート◯5 | フルサポート◯3.2 | 不明 |
|---|
| 複数の背景 | フルサポート◯2.1 | 不明 | フルサポート◯あり | フルサポート◯4 | 不明 | フルサポート◯3.2 | 不明 |
|---|
| 背景としてのSVGイメージ | フルサポート◯3 | 不明 | フルサポート◯あり | フルサポート◯4 | フルサポート◯あり | フルサポート◯4.2 | 不明 |
|---|
background-size | フルサポート◯3 | 不明 | フルサポート◯あり | フルサポート◯18 | フルサポート◯あり | フルサポート◯4 | 不明 |
|---|
background-origin | フルサポート◯3 | 不明 | フルサポート◯あり | フルサポート◯22 | サポートなし✖ | フルサポート◯4 | 不明 |
|---|
background-clip | フルサポート◯3 | 不明 | フルサポート◯あり | フルサポート◯22 | サポートなし✖ | フルサポート◯4 | 不明 |
|---|
CSS background | CSS プロパティ 値| 意味 使い方 実例 – WebRef