Written by Kasumi

CSSで背景画像を右からを基準にpx指定する方法

背景画像を右からを基準に何px指定した場所に表示したい。

このような疑問に回答します。

通常は背景画像の位置指定はbackground-positionを使い、pxで位置指定する場合は左からとなってます。

本記事では、背景画像を右から何px指定した場所にもっていく方法について解説します。

background-positionプロパティを使って右からを基準にpx指定した例

background-position: 10px 10px;

通常の書き方だと、最初は上下の指定、次に左右の指定になるので、上記を例にした場合、左から10px、上から10pxの指定になります。

これを以下のように変更。

background-position: right 10px bottom 10px;

上記のように、pxの前に基準位置を指定してあげる事によって、右からだったり、下からだったりを基準にすることができます。

上記の例だと右から10px、下から10pxの位置に位置指定しています。

まとめ

以外に簡単なことですが、そんなに実装する頻度がないので、記事にしました。

ぜひ参考にしてみてください。

以上で解説を終わります。

目次

関連記事

WordPress プログラミング

【アドミンバー】WordPressで管理画面にログインしたらページ上部に余白ができるのを解決!

2022.04.14
390
WordPress プログラミング

【Contact Form 7】Form data to kintoneでkintone側に二重送信されるのを防ぐ【確認画面が原因】

2022.03.17
312
WordPress プログラミング

WordPressで固定ページの名称を変更する方法

更新日:2022.04.23
763
WordPress プログラミング

投稿の一覧ページで、過去記事を一番先頭に持ってくる方法【ワードプレス】

2019.11.29
338