background 속성

• background-color
  태그의 배경 색을 지정합니다.
  값은 실제 색 이름, 16진수, rgb 로 색을 지정 할 수 있습니다.

background-image

태그의 배경 이미지를 한개 또는 여러개를 지정할 수 있습니다.

• background-image : url("주소"); 의 방법으로 이미지를 지정 합니다.

background-repeat

지정한 이미지의 원본 크기가 배경 크기보다 작다면 어떻게 채워 넣을지 정할수있는 속성이다.

• repeat : 배경을 반복해서 채워 넣습니다.
• no-repeat : 채워 넣지 않고 배경의 이미지만 배경으로 넣습니다.
• repeat-x : 원본 크기의 이미지에서 x 축으로만 채워 넣습니다.
• repeapt-y : 원본 크기의 이미지에서 y축으로만 채워 넣습니다.

background-position

배경의 이미지의 위치를 지정 합니다.

• background-position-x : x 축으로 right, left, center 값을 지정해 이미지의 위치를 지정 합니다.
• background-position-y : y 축으로 top, bottom, center 값을 지정해 이미지의 위치를 지정 합니다.
• background-position : top, right, bottom, left, center 값을 지정해 이미지의 위치를 지정 합니다.

background-size

배경의 크기를 지정 합니다.

• background-size : 너비 값, 높이 값; 으로 배경의 크기를 지정 할 수 있습니다.
• cover : 이미지의 비율이 깨지지 않는 한도 내에서 최대 사이즈를 지정 합니다.
• contain : 이미지가 찌그러지거나 잘리지 않는 한도 내에서 최대 사이즈를 지정 합니다.

background :

위에서 배운 background-image, background-repeat, background-position 속성을 한번에 지정 할 수 있습니다. 순서는 상과 없습니다.