CSS3で背景画像の位置を右や下からpx指定

背景画像の位置を指定するbackground-position
CSS2までは右や下を基準に配置したいとき、端っこまで揃えることしかできませんでしたが
CSS3からは、このような書式で右や下からの位置もpx指定できるようになりました。

※対応しているブラウザが限られているので注意!

.new_position {
	background-position: right 18px bottom 18px;
}

この新仕様を活用すれば、
たとえばこんな画像を使いまわして

※白いチェックマークの背景が透明になっている画像なので、黒背景の上に配置しています

チェックマーク風のアイコンも

チェックマーク付のボタンも

CSSの設定で作れます。

ただし、こんなに便利なのに万能ではありませんでした。

対応環境は限られています

パソコンでは、モダンブラウザはこの仕様に対応しているものの
InternetExplorerは8以下で対応していません。

IEでは制約があるけど、スマホ専用サイトならば使えそうと思ったのですが
このbackbround-positionの新仕様、
iOS 6Android 4系も対応していません。

…積んだ。
便利な機能に限って、仕事で使えない orz

先日、背景がスマホでなんか崩れてるという事案があり
調査してみたら、右からbackbround-positionを使用されてるところが数十箇所…
納期直前やん!なんじゃこりゃー !!!! Σ(゚Д゚i!|)

実 機 確 認 、 だ い じ !

右からbackbround-positionをつかわれるときは、対応環境を十分ご確認ください。

サンプル

気をとりなおして。
CSS2までの書式とCSS3の書式を比較すると、こうなります。

CSS2までの背景画像位置指定

CSS3の背景画像位置指定

<span class="sample_button old_position">CSS2までの背景画像位置指定</span>

<span class="sample_button new_position">CSS3の背景画像位置指定</span>
.sample_button {
	display: inline-block;
	padding: 6px 48px 6px 24px;
	margin: 18px 0;

	font-size: 18px;
	font-weight: bold;
	text-align: center;

	color: #fff;
	background: #06c url(/wp-content/uploads/2014/01/icon_check.png) no-repeat;
	background-size: 18px 18px;
	border-radius: 3px;
}

.old_position {
	background-position: right center;
}

.new_position {
	background-position: right 18px center;
}

関連記事

Pocket