背景画像の配置位置を制御するプロパティです。キーワード（top、center、bottom、left、right）や数値、パーセントで位置を指定できます。複数の背景画像それぞれに異なる位置を設定することも可能です。
background-position: <position> | <length> | <percentage>| bg-center | background-position: center |
| bg-top | background-position: top |
| bg-left | background-position: left |
任意値: bg-[position:20%_80%]
background-position: center;背景画像を中央に配置
background-position: top right;背景画像を右上に配置
background-position: 20% 80%;水平方向20%、垂直方向80%の位置に配置
background-position: 50px 100px;左から50px、上から100pxの位置に配置
ヒーロー画像の重要な部分を調整したり、パターン画像の位置を微調整するのに便利。centerは最も使用頻度が高い。
パーセント指定は画像とコンテナの対応する位置を揃える仕組みなので、50% 50%が中央配置になる。
%指定の意味が特殊で、「画像の50%地点を要素の50%地点に合わせる」という基準点同士の対応です（pxのような単純オフセットではない）。この仕様はAIも誤って説明しがちです。人物写真の顔位置合わせなどはパーセンテージ基準の方が破綻しにくい、という実務知識も添えると良いコードが出ます。
レスポンシブで背景写真の顔が見切れないよう、background-positionをパーセンテージ基準で調整して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。