新着! 44ページの電子書籍「CSS in 44 minutes」がリリースされました! 😃

今すぐ入手 →

#background-size

背景画像のサイズを定義します。

デフォルト background-size: auto auto;

背景画像は元のサイズを保持します。

たとえば、この背景画像は960px x 640pxの大きさです。アスペクト比は3:2です。コンテナ(高さ150px)よりも大きいため、クリップされます。

background-size: 120px 80px;

サイズはピクセル単位で指定できます

  • 最初の値はのサイズです
  • 2番目の値はのサイズです

background-size: 100% 50%;

パーセント値も使用できます。ただし、これは背景画像のアスペクト比を変更し、予期しない結果になる可能性があることに注意してください。

background-size: contain;

キーワード`contain`は、背景画像が完全に表示されるようにサイズを変更します。

background-size: cover;

キーワード`cover`は、要素が完全に覆われるように背景画像のサイズを変更します。