CSSで背景画像を右から(下から)指定する方法

ウェブ制作技術

こんにちわ樋口です。
とうとう9月になってしまいました。
夏は終わってしまったのか…
仕方がないので「ビーチボーイズ」のDVDを観て、夏の気分を演出したいと思います。
私は広末と同学年なので、若かりし頃の広末を観て自分の青春時代と重ね合わせ、郷愁と悔恨の入り混じったほほえみを浮かべることができます。
それがぼくの特技です。

本日はかゆい所に手がとどくCSSの小ネタを紹介します。

CSS3

background-positionを、右基準、下基準で指定する

background-positionのおさらい

background-positionは、背景画像の表示位置を指定する、CSSのプロパティです。
キーワードや、%、pxなどで指定できます。
例えば下記のように。

数値を2つ並べて指定した場合、前の値が左から(横方向)の、後の値が上から(縦方向)の距離になります。

background-positionで「右から」「下から」指定(CSS3)

本題です。
従来、background-positionは、左および上を基準にしか指定できませんでした。
ですが、CSS3で、右および下を基準にした指定が可能になりました。

指定方法は下記です。

背景画像の位置指定がより直感的になりましたね。

この指定方法はCSS3の新機能なので、対応ブラウザにはご注意ください。

Can I Useで対応ブラウザを確認

あなたのビジネスのWeb戦略を、ぜひキタックにおまかせください。

効果を出すためのサイト運営、集客できるウェブ広告

ブログの更新情報をお知らせしています。