web関連

【css】background-positionで「右」と「下」を基準に指定する方法

【css】background-positionで「右」と「下」を基準に指定する方法

よく忘れるから備忘録

background-positionで右下基準で指定する方法

background-position : right 10px bottom 10%;

これで右から10px、下から10%の位置を指定できる

何も指定しない時の基準は「左」基準「上」基準

通常は、「X座標(左基準)」「Y座標(上基準)」になってる

//左から10px、上から10%の位置
background-position : 10px 10%;
最初の値は「X座標」か「Y座標」か毎回迷う
「background-size」も一緒に使うけどどっちも「横(X)」「縦(Y)」で「XY」とアルファベットの並びになってる

よく使う書き方

ボタンリンク内に矢印のアイコンとか仕込むときによく使う

//右から15px、Y座標は真ん中寄せ
background-position : right 15px center;

画像とか背景で指定しておくと扱いが楽なんでよく使うけど書き方毎回忘れるからメモ

Leave a Comment

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。