background-size
auto | 画像をそのままのサイズで表示 |
contain | 画像の縦横比を保ちながら、要素内に画像の全部を収める(隙間ができる場合がある) |
cover | 画像の縦横比を保ちながら、隙間ができないようにサイズ変更 |
px | 数値で指定。ひとつ→幅と高さ同じ。ふたつ→幅、高さの順。(片方にautoを入れると縦横比を保つ) |
% | 要素に対する割合で画像サイズを変更(片方にautoを入れると縦横比を保つ) |
background-size: contain;
background-size: cover;
background-size: 400px 300px;
background-size: 20% 60%;
background-size: 20% auto;
background-position
背景画像の表示位置を調整
px | 左から◯px、上から◯px ※そのポイントに画像の左上が重なる |
% | 左から◯%、上から◯% ※そのポイントに画像の左から◯%、上から◯%の場所が重なる |
位置を示す言葉 | top、bottom、left、right、center |
background-position: 400px 300px;
background-position: 50% 50%;
background-possition: top right;
※混在も可
background-possition: left 50%;
background-repeat
repeat | 初期値 |
no-repeat | 繰り返さない |
repeat-x | 横方向に繰り返し |
repeat-y | 縦方向に繰り返し |