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

CSSで背景画像を右や下の位置から指定する方法は以前記事にしましたが、中央位置から指定しようとしてうまくいかないようだったので、対応方法をメモ。

サンプルコード

中央位置から左右にずらして背景画像を配置してみます。

HTML

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

CSS

.sample {
	height: 100px;
	background: 
		url(img100_gray.png) center bottom no-repeat,
		url(img100_red.png) center -100px bottom no-repeat,
		url(img100_blue.png) center 100px bottom no-repeat;
}

中央位置から左右に100pxずらして配置したつもりでしたが、「invalid property value」のエラーになりました。
うまくいかなかった場合のデモページ

いろいろ試してみましたが、calc()を使うことで意図した形に配置できました。

CSS

.sample {
	height: 100px;
	background: 
		url(img100_gray.png) center bottom no-repeat,
		url(img100_red.png) calc(50% - 100px) bottom no-repeat,
		url(img100_blue.png) calc(50% + 100px) bottom no-repeat;
}

対応後のデモページ