閉じる

【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;
}

 

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

関連記事

  1. 【CSS】ボタンのタップ、クリック時のオレンジやブルーの枠線を消…

  2. WEBサイトの制作やネットショップ作成で利用できる2021年の補…

  3. Facebook Page Plugin(ページ プラグイン)埋…

  4. GOOGLE MAPのカスタマイズに必要なAPIキーの取得

  5. サイト内検索機能で広告yahooカスタムサーチを利用する

  6. IE

    2018年1、2月のブラウザシェアとIE使用率

ピックアップ記事

  1. キーワード
ページ上部へ戻る