background-position で「右から」とか「下から」などを指定する方法

CSS2.1ではbackground-positionプロパティを使用したさい、左から何ピクセル、上から何ピクセルといったように左や上からしか位置を指定できませんでしたが、CSS3になり、右から何ピクセル、下から何ピクセルといったように、背景画像の位置を指定することができるようになりました。

このように、rightとbottomの後に移動させたい量だけ数値を指定することで、右と下からの移動量を指定することができます。上の例では右から30px、下から50pxを指定したことになります。

↑js.do.itにサンプルを用意しました。
これで背景画像を完全に好きな位置に配置できるようになりますね。


この記事をかいた人

ドレッド Webクリエイター

WordPressの構築やjQueryによる動的サイトの実装が得意なWebクリエイターです。このブログではWeb制作で役に立ちそうな知識から、プライベートの出来事まで幅広いネタを取り扱っております。ご質問、ご要望はお問合せフォームからどうぞ! お仕事のご依頼はコレカラウェブへ! 2016年10月から放送大学に入学(選科履修生)

CSS | Posted on 2014/11/18 20:24

※コメントは管理人の承認後に公開されます。

コメントを残す

メールアドレスが公開されることはありません。