SoyaBlog

これを見れば解決しそうや

HOME>CSS>background-positionについて解説
ブログ投稿日時：
ブログ更新日時：
background-positionについて解説

background-positionについて解説

  1. background-position とは
  2. background-position の指定方法
  3. background-position を キーワード で指定
  4. background-position を px で指定
  5. background-position を % で指定
  6. 今回のまとめ
1.

background-position とは

background-position は背景画像の位置を指定するプロパティです。

2.

background-position の指定方法

主な指定方法は キーワード、 px、 % の3つです。

3.

background-position を キーワード で指定

background-position の キーワード で使える値は下記の5つです。

top … 上揃え

right … 右揃え

bottom … 下揃え

left … 左揃え

center … 中央揃え

それではそれぞれの指定方法と表示を見ていきましょう。

background-position: top; の指定方法と表示

<div class="background-top"></div>
.background-top {
  background-image: url(../images/post/background-position-keyword.png);
  background-position: top;
  width: 100%;
  height: 500px;
}

元画像はこちら

カラフル
HTMLとCSSの表示

上記のように background-position: top; を指定すると画像の上側を表示します。

※必要に応じてブラウザ幅を変えて見ることをおすすめします。

background-position: right; の指定方法と表示

<div class="background-right"></div>
.background-right {
  background-image: url(../images/post/background-position-keyword.png);
  background-position: right;
  width: 100%;
  height: 500px;
}

元画像はこちら

カラフル
HTMLとCSSの表示

上記のように background-position: right; を指定すると画像の右側を表示します。

※必要に応じてブラウザ幅を変えて見ることをおすすめします。

background-position: bottom; の指定方法と表示

<div class="background-bottom"></div>
.background-flame {
}

.background-bottom {
  background-image: url(../images/post/background-position-keyword.png);
  background-position: bottom;
  width: 100%;
  height: 500px;
}

元画像はこちら

カラフル
HTMLとCSSの表示

上記のように background-position: bottom; を指定すると画像の下側を表示します。

※必要に応じてブラウザ幅を変えて見ることをおすすめします。

background-position: left; の指定方法と表示

<div class="background-left"></div>
.background-left {
  background-image: url(../images/post/background-position-keyword.png);
  background-position: left;
  width: 100%;
  height: 500px;
}

元画像はこちら

カラフル
HTMLとCSSの表示

上記のように background-position: left; を指定すると画像の左側を表示します。

※必要に応じてブラウザ幅を変えて見ることをおすすめします。

background-position: center; の指定方法と表示

<div class="background-flame">
  <div class="background-center"></div>
</div>
.background-center {
  background-image: url(../images/post/background-position-keyword.png);
  background-position: center;
  width: 100%;
  height: 500px;
}

元画像はこちら

カラフル
HTMLとCSSの表示

上記のように background-position: center; を指定すると画像の中央を表示します。

※必要に応じてブラウザ幅を変えて見ることをおすすめします。

4.

background-position を px で指定

background-position を px で指定するときは background-position: 値1 値2; 使って指定します。

値1で横方向、値2で縦方向の位置を指定します。また、要素の左上を基点として位置を指定します。

それでは指定方法と表示を見ていきましょう。

<div class="background-px"></div>
.background-px {
 /* 要素全体の領域 */
 background-color: white;
 width: 100%;
 height: 500px;

 /* 背景画像の表示指定 */
 background-image: url(../images/post/background-position-px.png);
 background-size: auto;
 background-repeat: no-repeat;
 /* background-position: 横 縦; */
 background-position: 50px 80px;
}
HTMLとCSSの表示

上記のように background-position: 50px 80px; で指定すると要素の左端から50px、要素の上端から80pxの位置に背景画像を表示します。

5.

background-position を % で指定

background-position を % で指定するときは px と同じように、1つ目の値で横方向、2つ目の値で縦方向の位置を指定します。

それでは指定方法と表示を見ていきましょう。

<div class="background-percent"></div>
.background-percent {
 /* 要素全体の領域 */
 background-color: white;
 width: 100%;
 height: 500px;

 /* 背景画像の表示指定 */
 background-image: url(../images/post/background-position-px.png);
 background-size: auto;
 background-repeat: no-repeat;
 /* background-position: 横 縦; */
 background-position: 40% 20%;
}
HTMLとCSSの表示

上記のように background-position: 40% 20%; で指定すると要素の左端から40%、要素の上端から20%の位置に背景画像を表示します。

6.

今回のまとめ

この記事では background-position について解説しました。

background-position は背景画像の位置を指定するプロパティです。

主な指定方法は キーワード、 px、 % の3つです。

この記事を見て使い分けられるようになると嬉しいです。

最後までお読みいただきありがとうございます。