背景画像を中央や右、下からずらして配置する

以前に背景画像を右や下の位置から指定する方法や中央からずらして配置する方法を試しましたが、これらを複合して使おうとした際にうまくいかないということがあったので、対応方法をメモ。

サンプルコード

まずは右や下を基準にして位置を指定する方法と、中央からずらして配置する方法をそれぞれ試してみます。

<div class="sample"></div>

右や下を基準にする場合、rightやbottomなどのキーワード値 + 数値 の形で指定します。

.sample {
	background-image: url(star.png);
	background-position: right  -20px bottom 30px;
}

CSSは必要部分のみ抜粋しています。
右や下から指定するデモページ

中央を基準にする場合、calc()を使って指定します。

.sample {
	background-image: url(star.png);
	background-position: calc(50% - 20px) calc(50% - 30px);
}

中央から指定するデモページ

次にこの2点の方法をつかって、X方向を中央から、Y方向を下から指定してみます。

.sample {
	background-image: url(star.png);
	background-position: calc(50% - 20px) bottom 30px;
}

これで対応できるかと思ったのですが、「invalid property value」のエラーになりました。
うまくいかなかったデモページ

調べてみると、以下のような情報がありました。

値3つの構文: 2つの値はキーワード値で、3つ目の値はその前の値のオフセットです。

• 最初の値はキーワード値 top, left, bottom, right, center のうちの1つです。ここで left または right が指定された場合は、これは X 座標を定義します。 top または bottom が指定された場合は、これは Y 座標を定義し、もう一方のキーワード値が X 座標を定義します。
• length または percentage 値が2番目の値であった場合は、最初の値に対するオフセットです。3番目の値であった場合は、2番目の値に対するオフセットです。
• 単一の長さまたはパーセント値は、その前のキーワード値に対するオフセットです。1つのキーワードに2つの keyword with two length または percentage 値の組み合わせは無効です。

引用 – background-position – CSS: カスケーディングスタイルシート | MDN

今回のようにbackground-positionの値を3つ指定する場合、そのうちの2つはtopやleftなどのキーワード値、残りの1つがどちらかのオフセット値となるようにしないといけないようです。

キーワード値を使う場合は中央からずらして指定ができないので、今回の場合はX方向・Y方向ともにcalc()で指定する必要があるようです。

.sample {
	background-image: url(star.png);
	background-position: calc(50% - 20px) calc(100% - 30px);
}

これで想定した位置に配置することができました。
中央と下から指定するデモページ