【CSS】background-potisionの位置の調整の仕方【使い方】

コーディング
スポンサーリンク

【background-position: 位置;】

位置の指定の仕方はこんな感じです。

background-position: 水平位置(左から) 垂直位置(上から);

 

位置の指定方法

%で指定

background-position: 左から何%の位置 上から何%の位置;
background-position: 30% 50%;

 

pixelで指定

background-position: 左から何pxの位置 上から何pxの位置;

background-position: 80px 50px;

 

文字で指定

  • top
  • right
  • bottom
  • left
  • center

一番上にしたい場合(垂直0%)、右端にしたい場合(水平100%)はこの指定方法で大丈夫です。

 

初期値は0% 0%

background-positionを指定しないと0% 0%となり、背景位置はこのようになります。

 

真ん中にしたい場合

位置を真ん中にしたい場合は

・background-position:50%;
・background-position: center;

でOKです。位置の値を1つしか指定しないと両方に適用されます。

コメント

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