閉じる

【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. chrome68

    Chrome68から非SSLサイトに「保護されていません」の警告…

  2. レスポンシブデザインでCSSが効かない場合に確認すること

  3. TCD

    WordPressでポータルサイトを簡単に作成できるテーマ(テン…

  4. IE

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

  5. chrome

    2017年9月の日本でのブラウザシェアとChrome62のフォー…

  6. Instagram(インスタグラム)のアクセストークン、APIが…

ピックアップ記事

  1. reCAPTCHA
  2. 日本語設定
ページ上部へ戻る