目次
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 | 縦方向に繰り返し |