閉じる

【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. サイト内検索機能で広告yahooカスタムサーチを利用する

  2. SSH接続で使える初心者のためのUnix/Linuxコマンド

  3. reCAPTCHA

    フォームの迷惑メール対策で有効なGoogle「reCAPTCHA…

  4. TCD

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

  5. IE

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

  6. chrome hosts

    Chromeでhosts設定を行える拡張機能

ピックアップ記事

  1. 日本語設定
  2. キャプチャソフト
ページ上部へ戻る