background-position CSS プロパティとは
トピック：背景画像の開始位置を設定する 事ができる デフォルトでは、背景画像は要素の左上隅に配置され、縦横両方向に繰り返し表示される
プロパティ background-position
実例 コード 1
サンプル コードを試す body {
background-image: url("../webref.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
情報：- CSS の
background-position プロパティは、設定されたそれぞれの背景画像の初期位置を、 background-origin で定義された背景レイヤーからの相対位置で設定する ことができる。
プロパティ 定義と使用法
| デフォルト値・初期値 : | 0% 0% |
|---|
| 適用対象 : | 全要素。 ::first-letter and ::first-line にも適用されます。 |
|---|
| 継承 : | 不可 |
|---|
| パーセンテージ : | 背景画像のサイズを引いた背景位置決め領域のサイズを参照。サイズは、水平オフセットの幅および垂直オフセットの高さを参照 |
|---|
| メディア : | visual |
|---|
CSS Version | CSS1 |
|---|
| 計算値 : | リストは、原点を表す2つのキーワードと、その起点からの2つのオフセットから構成され、それぞれが絶対長さ (aが与えられている場合 <length>)として与えられ、それ以外はパーセンテージ |
|---|
| JavaScript 構文 | object.style.backgroundPosition="center" |
|---|
| アニメーションの種類 : | 長さ、パーセンテージ、または計算の単純なリストの反復可能なリスト |
|---|
| 正規順序 : | 形式文法で定義される一意のあいまいでない順序 |
|---|
| CSSの構文 | background-position: value; |
|---|
プロパティ値
| 値 | 説明 |
bottom | 垂直位置で100％に相当する |
center | それ以外の値が与えられていなければ水平位置は50％、それがあれば垂直位置は50％に相当する |
left | 水平位置は0％に相当する |
right | 水平位置で100％に相当する |
top | 垂直位置に対して0％に相当する |
| 長さ | 実際のピクセルの長さ。たとえば、値のペア '10px 20px'では、画像の左上隅が要素のボックスの左上隅の右に10px、下に20px配置される |
| パーセンテージ | 要素サイズの1パーセント。たとえば、値のペア '0％0％'では、画像の左上隅が要素のボックスの左上隅に揃えられます。 |
initial | このプロパティをデフォルト値に設定する |
inherit | 親要素からこのプロパティを継承する |
サポートするデスクトップ ブラウザ対応・互換性
| Property | Desktop 互換性 |
|---|
| background-position | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|
| 基本 サポート | フルサポート◯1 | フルサポート◯12 | フルサポート◯1 | フルサポート◯4 | フルサポート◯3.5 | フルサポート◯1 |
|---|
| Multiple backgrounds | フルサポート◯1 | フルサポート◯12 | フルサポート◯3.6 | フルサポート◯9 | フルサポート◯10.5 | フルサポート◯1.3 |
|---|
サポートするモバイル ブラウザ対応・互換性
| Property | Mobile 互換性 |
|---|
| background-position | Android | Chrome for Android
| Edge Mobile | Firefox for Android
| Opera for Android
| iOS Safari | Samsung Internet |
|---|
| 基本 サポート | フルサポート◯あり | フルサポート◯あり | フルサポート◯あり | フルサポート◯あり | フルサポート◯あり | フルサポート◯あり | フルサポート◯あり |
|---|
| Multiple backgrounds | フルサポート◯あり | フルサポート◯あり | フルサポート◯あり | フルサポート◯あり | フルサポート◯あり | フルサポート◯あり | フルサポート◯あり |
|---|
：background-position 関連記事 
CSS background-position | CSS プロパティ 値| 意味 使い方 実例 – WebRef