【CSS】背景のbackground-positionで右からや右上、右下の位置に配置したい場合の設定

背景イメージのCSSはbackground-positionで設定しますが、background-positionの横位置の基準は左です。右から位置を設定する場合はrightを設定します。

background-positionで右の位置に設定したい場合

はじめにbackground-positionの位置設定を確認しておきましょう。

background-position:横位置 縦位置;

background-positionで右に設定したい場合はbackground-positionの横位置の設定にrightを設定します。

背景を右端に設定したい場合

背景イメージを右端に設定した例

.text{
background-position:right auto;
}

背景を右下に設定したい場合

背景イメージを右下に設定した例

.text{
background-position:right bottom;
}

背景を右上に設定したい場合

背景イメージを右上に設定した例

.text{
background-position:right top;
}

background-positionで右から特定の位置に設定する場合

背景で右～特定の位置にイメージなどを配置したい場合はrightの横に数値を設定します。

背景を右から150pxの位置に設定したい場合

背景イメージを右から150pxに設定した例

.text{
background-position:right 150px auto;
}

背景を右から30%の位置に設定したい場合

背景イメージを右から150pxに設定した例

.text{
background-position:right 30% auto;
}

背景イメージの位置指定はレスポンシブデザインを使用した場合はスマートフォンでリセットしたり、位置を調整する必要があります。注意しましょう。