背景に関連するPropertyは、この要素の背景色、背景画像を定義します.

背景に関連する属性

1. background-image

urlによる背景画像の適用

body { 
	background-image: url("...");
}

適用すると、元の画像と同じサイズの画像が表示されるので、背景のサイズを指定する必要があります.

2. background-repeat

body { 
	background-image: url("...");
	background-repeat: no-repeat;
}

画像がバックグラウンドより小さい場合、基本的には、すべてのコンテンツを塗りつぶすために繰り返し操作を防止することができます.

3. background-size

残りの空間はどう処理しますか?読み込んだ画像のサイズを調整すればいいです.

body { 
	background-image: url("...");
	background-repeat: no-repeat;
	background-size: 300px 200px;
}

1番目の値はwidth、2番目の値はheight、1つの値だけがwidthを表します.
具体的には、最大サイズ이미지가 잘리지 않는のinclude이미지를 잘라내서でも、埋まった蓋を使います.

4. background-attachment

画面をスクロールすると、画像もスクロールします.背景画像をposition:fixedのように固定してスクロールしないにするには
background-attach:fixedを使用します.
へいこうこうか度を実現

5. background-position

背景の位置を指定できます.
背景画像の初期位置を指定し、top、left、right、bottom、centerなど、Box内の位置を指定できます.

6.短縮👉 background

background: color url('...') repeat여부 attachment여부(생략가능) position

ただし、ショートカットを使用してもbackground-sizeを別途指定します.

イメージライト

複数の画像をそれぞれ受信するのではなく、幅と高さを得るために1つの画像を受信し、background-positionプロパティを使用して画像のみを受信します.
画像要求1번만の点から、要求回数を減らし、高速レンダリングを行うための最適化技術である.(포토샵 툴을 사용해서 일일히 px값을 구해와야하는 번거로움이 있지만은..)