背景

background-position

background-position は背景画像を置く位置を指定します。キーワード・長さ・パーセントで、横と縦の順に書きます。

構文

<bg-position>#

<bg-position> = <position>

プリセット

右下の角をドラッグするとサイズを変えられます

.box {
  background-image: url(/sample.svg);
  background-repeat: no-repeat;
  background-position: 25% 75%;
}

四角の中をクリック・ドラッグして中心を動かせます

横の位置

縦の位置

% は、画像の X% の点を、領域の X% の点に合わせるという意味です。0% で左端どうし、100% で右端どうしがそろうので、画像がはみ出すことはありません。50% はちょうど真ん中です。長さ（20px など）は、画像の左上の角を領域の左上からずらす量です。

1 つだけ書くと、もう片方は center になります。top だけなら上の中央です。
キーワードどうしなら順不同です（top right と right top は同じ）。
right 20px bottom 10px のように、キーワードのあとに長さを続けると、その辺からの距離になります（このページのコントロールでは扱っていませんが、コードには書けます）。

初期値は 0% 0%（左上）です。画像をくり返す設定のときは、ここで決めた位置が並びの基準になります。このページのプレビューでは、見本の画像をくり返さない設定で敷いています。