cssプロパティbackground-position(背景画像が大きい)についての説明

こんにちは tanaka です。

background-positionの使い方が
難しいと感じたことはありませんか?

background-position は
背景画像(background-image
を配置するために使います。

その background-position は
背景画像の大きさによって
目的が変わります。

 ・背景画像が小さい(キャラクター画像などを背景に配置)
 ・背景画像が大きい(トリミング)

しかし、
背景画像が大きくても小さくても
使い方は同じなので
 ・置くイメージ
 ・3つの指定方法
   1:場所指定 (top bottom left right center)
   2:%指定  (10% 50%)
   3:px指定  (30px 50px)
さえ身に付けば
楽に使えます。

それでは、
background-position を
わかりやすく説明します。

background-positionの使い方・・背景画像が小さい
の記事は、こちら↓

<コピーペーストについて>

コードをコピーする際は
灰色で四角く囲まれた所を使用してください。

<i class="fas fa-check-circle"></i>
スポンサーリンク

background-position前説

背景画像2パターン

background-position は、
背景画像(background-image
を配置するために使います。

background-position は、
以下の2パターンで
使用できます。

 1:背景画像(background-image)が小さい
   (例:キャラクター画像など小さい物)
   (動かせるスペースがある)

 2:背景画像(background-image)が大きい
   (例:背景として入れた大きな画像)
   (置く場所より大きい)

もしも
 背景画像(background-image)
 置き場所
両方が同じ大きさなら

どこから置いても
結果は変わりません。

「背景画像が大きい」

一度に2パターン説明すると
とても長くなるため

 1:背景画像が小さい
 2:背景画像が大きい

の2回に分けます。

今回は、
 2:背景画像が大きい
を、お送りします。

background-position結論

トリミング目的

背景画像(background-image)が
表示領域より
大きいと
背景画像は、表示領域からはみ出ます。

そして、
はみ出た部分は
画面に表示されません。

この
画面に表示されないを
利用して

background-position を、
トリミング目的として使います。

説明準備

説明用の画像を2種類
 1:場所名
 2:パーセント
用意しました。

bgposition画像50
bgposition画像58

 上:背景画像(background-image)= 南国画像
 下:置き場所 = みどり枠

上を
下へ置きます。

この2つを使って
説明します。

指定方法3種類

background-position の
指定方法は3種類
 1:場所指定 (top bottom left right center)
 2:%指定  (10% 50%)
 3:px指定  (30px 50px)

1:場所指定

top指定

background-position: top;

背景画像(top)
置き場所(top)
 top と top を合わせる。

bgposition画像52

(注意)
画像下は、表示結果です。
枠から出たところは表示されません。

bottom right指定

background-position: bottom right;

背景画像(bottom right)
置き場所(bottom right)
 bottom right と bottom right を合わせる。

bgposition画像56

(注意)画像下は表示結果。

2:%指定

background-position: 20% 0%;
background-position:ヨコ方向 縦方向;

背景画像(20% 0%)
置き場所(20% 0%)
 ヨコ20% と ヨコ20% を合わせる。

bgposition画像62

(注意)画像下は表示結果。

背景画像を残す場所が
 ・左なら%を小さく
 ・右なら%を大きく

 左  中央  右
 0% 50% 100%

背景画像を残す場所が
 ・上なら%を小さく
 ・下なら%を大きく

 上   0%
 中央 50%
 下  100%

3:px指定

background-position: -100px -100px;
background-position: ヨコ方向 縦方向;

左右 -100px
上下 -100px

左上が0
数値はマイナスで指定。

bgposition画像89

(注意)画像下は表示結果。

[ad]

background-position具体例

それでは、
2:背景画像が大きい
の詳しい説明をします。

指定方法3種類

background-position
の指定方法は3種類あります。

 1:場所指定 (top left bottom など)
 2:%指定  (10% 50%)
 3:px指定  (50px 50px)

1:場所指定

background-position: top;

それでは、
background-position で
場所指定をやってみましょう。

top だけを
指定しました。

置くイメージとしては、
top と top を合わせる。
 背景画像 top
 置き場所 top

bgposition画像51
bgposition画像52

(注意)画像下は表示結果。

bottom right

次は
bottom right
2つ同時に指定します。

 背景画像 bottom right
 置き場所 bottom right

bottom と bottom を合わせる。
right と right を合わせる。

bgposition画像55
bgposition画像56

(注意)画像下は表示結果。

指定したどうしを合わせる
これがポイントです。

[ad]

2:%指定

%指定はむずかしい

それでは、
2:%指定 (10% 50%)
パーセント指定です。

少しむずかしいですが
使えると便利なので
頑張って覚えてみましょう。

使い方(ヨコ方向、タテ方向)

指定方法は
background-position: 10% 50%;
background-position: ヨコ方向 タテ方向;
と指定します。

分かりやすくするため
画像を用意しました。

 ・背景画像(南国画像)
 ・置き場所(みどり枠)
 ・パーセント
  左  右
  0% 100%

  上  0%
  下 100%

bgposition画像58

それでは、
%指定の置き方をみて行きましょう。

使い方(合わせる)

置き方のルールは、
基本的に場所指定と同じです。

場所指定の top 指定では
 top と top を合わせる。
でした。

%指定も同じ感じです。

20%指定だとすると
  背景画像(20%)と
  置き場所(20%)を
合わせる。

それでは、
具体的にみて行きましょう。

0% 0%

まずは、
 ヨコ方向 0%
 タテ方向 0%
です。

bgposition画像59

背景画像 0%
置き場所 0%
を合わせる。

結果は左上に置かれます。

bgposition画像60

(注意)
画像下は、表示結果です。
枠から出たところは表示されません。

20% 0%

次は、
 ヨコ方向 20%
 タテ方向 0%
です。

bgposition画像61

背景画像 20%
置き場所 20%
を合わせる。

bgposition画像62

(注意)画像下は表示結果。

50% 0%

次は、
 ヨコ方向 50%
 タテ方向 0%
です。

bgposition画像63

背景画像 50%
置き場所 50%
を合わせる。

背景画像は中央に来ました。

bgposition画像64

(注意)画像下は表示結果。

80% 0%

次は、
 ヨコ方向 80%
 タテ方向 0%
です。

bgposition画像65

背景画像 80%
置き場所 80%
を合わせる。

bgposition画像66

(注意)画像下は表示結果。

100% 0%

次は、
 ヨコ方向 100%
 タテ方向 0%
です。

bgposition画像67

背景画像 100%
置き場所 100%
を合わせる。

bgposition画像68

(注意)画像下は表示結果。

0% 20%

それでは、
タテ方向も見て行きましょう。

左上が0%でした。

bgposition画像60

(注意)画像下は表示結果。

タテ方向を指定します
 ヨコ方向 0%
 タテ方向 20%

bgposition画像69

背景画像 20%
置き場所 20%
を合わせる。

bgposition画像70

(注意)
画像下は、表示結果です。
枠から出たところは表示されません。

0% 50%

次は、
 ヨコ方向 0%
 タテ方向 50%
です。

bgposition画像71

背景画像 50%
置き場所 50%
を合わせる。

bgposition画像72

(注意)画像下は表示結果。

0% 100%

次は、
 ヨコ方向 0%
 タテ方向 100%
です。

bgposition画像90

背景画像 100%
置き場所 100%
を合わせる。

bgposition画像75

(注意)画像下は表示結果。

[ad]

3:px指定

最後に、
 3:px指定
です。

これは、
とても簡単です。

左上を開始点にして
指定した数字の分だけ移動します。

しかし、
注意点が一つ。

それは、
背景画像の配置はマイナスで指定します。

それでは、
実際に見て行きましょう

0px 0px

background-position: 10px 50px;
background-position: ヨコ方向 タテ方向;
で指定します。

そして、
左上が0で(開始点)になります。

まずは、
0で指定してみます。

bgposition画像76

左上(開始点)に来ました。

bgposition画像77

(注意)
画像下は、表示結果です。
枠から出たところは表示されません。

30px 0px

次は、
ヨコ方向30pxで指定します。

bgposition画像78

背景画像が右に30px
表示枠から出てしまいました。

なので、
px指定で置くときは
マイナスで指定します。

bgposition画像79

(注意)画像下は表示結果。

-30px 0px

次は、
ヨコ方向-30pxで指定します。

bgposition画像80

背景画像が-30px

bgposition画像81

(注意)画像下は表示結果。

0px 30px

次は、
タテ方向30pxで指定します。

bgposition画像84

背景画像が30px
表示枠から出てしまいました。

px指定はマイナスで指定します。

bgposition画像85

(注意)画像下は表示結果。

0px -30px

次は、
タテ方向-30pxで指定します。

bgposition画像86

背景画像が−30px

bgposition画像87

(注意)画像下は表示結果。

-100px -100px

次は、
ヨコ方向、タテ方向
同時に指定します。

bgposition画像88

背景画像が
 ヨコ方向 −100px
 タテ方向 −100px

bgposition画像89

(注意)画像下は表示結果。

px指定は、
左上を0として
マイナスで指定します。

よくわからないときは
動かしたい数字を入れて
それにマイナスをつけてください。

そうすれば
思ったところへ行くでしょう。

[ad]

まとめ

background-positionは
背景画像(background-image)を
配置するためにある。

指定方法は3種類
 1:場所指定 (top bottom left right center)
 2:%指定  (10% 50%)
 3:px指定  (30px 50px)

1:場所指定
(例)background-position: top;
 背景画像 top
 置き場所 top
top と top が重なる位置に置かれる。

2:%指定
background-position: ヨコ% タテ%;

背景画像を残す場所が
 ・左なら%小さく
 ・右なら%大きく

  左  中央  右
  0% 50% 100%

背景画像を残す場所が
 ・上なら%小さく
 ・下なら%大きく

 上   0%
 中央 50%
 下   100%

3:px指定
 左上を0として
 マイナス指定で置く
background-position: -30px -30px;

以上、
background-positionの使い方・背景画像が大きい
の話でした。

ありがとうございました。

タイトルとURLをコピーしました