Background관련 프로퍼티는 해당 요소의 배경색상, 배경 이미지를 정의한다.

Background 관련 속성들

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;
}

첫번째 값은 width, 두번째 값은 height를 의미하고, 하나만 값을 지정한 경우는 width만 설정하게 된다
상황에 따라 이미지가 잘리지 않는 최대 크기인 contain
이미지를 잘라내서라도 꽉 채우는 cover을 쓰기도 한다.

4. background-attachment

화면을 스크롤하면 이미지도 스크롤 된다. 이때 position: fixed처럼 배경이미지도 스크롤되지 않고 고정되어 있게 하려면
background-attachment: fixed를 사용한다.
이를 사용하면 패럴랙스효과도 구현할 수 있다

5. background-position

해당 배경에서의 위치를 지정할 수 있다.
배경이미지의 최초 위치를 지정하는데 top, left, right, bottom, center등 Box안의 위치를 지정할 수 있다.

6. 단축 👉 background

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

대신 단축을 쓰더라도 background-size는 따로 지정해줘야 한다.

이미지 스프라이트

여러장의 이미지를 각자 받아오지 않고, 하나의 이미지를 받아와서 width와 height를 얻은 후 background-position속성을 사용해 해당 이미지만 받아오기.
이미지를 1번만 요청한다는 점에서 요청 횟수를 줄이고 빠르게 렌더링 할 수 있는 최적화 기술이다.
(포토샵 툴을 사용해서 일일히 px값을 구해와야하는 번거로움이 있지만은..)