CSS

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

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

スポンサーリンク

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

See the Pen
background-position で「右から」とか「下から」などを指定する方法
by jugedred (@jugedred)
on CodePen.

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

ABOUT ME
アバター
ドレッド
ライティングやWeb制作などインターネットを活用して毎日を自由に生活してるドレッドのブログです。Web制作のちょっとしたテクニックや、趣味で勉強している各種資格、放送大学での学びの記録、そして毎月買った本についての記録を残しています。
お気軽にご相談下さい!

このブログの運営者にお仕事を依頼しませんか?

コレカラウェブ

現在はフリーランスのクリエイターとして、ウェブメディアのライティングやホームページ制作、コンサルティングをしています。まずは事業用サイト「コレカラウェブ」にアクセスしていただき、お気軽にお問い合わせください。メールでのご相談は無料です。皆様からのご連絡お待ちしております。

コレカラウェブ公式サイトへ

関連記事

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA