#5. CSS Background 속성

 

CSS background 속성은 HTML 요소의 배경을 스타일링하는데 사용됩니다.

 

• background-color: 배경의 색상을 지정합니다. CSS 색상 값이나 색상 이름을 사용할 수 있습니다.

• background-image: 배경에 사용할 이미지의 URL을 지정합니다. 만약 이미지가 없는 경우, 배경은 빈 것으로 나타납니다.

• background-repeat: 배경 이미지가 반복되는 방식을 지정합니다. "repeat"를 사용하면 가로와 세로 모두에서 반복됩니다. "repeat-x"를 사용하면 가로에서만 반복되고, "repeat-y"를 사용하면 세로에서만 반복됩니다. "no-repeat"을 사용하면 반복되지 않습니다.

• background-position: 배경 이미지의 위치를 지정합니다. 값으로는 픽셀 값이나 퍼센트 값, 그리고 좌표 지정 단어(top, bottom, left, right, center)를 사용할 수 있습니다.

• background-size: 배경 이미지의 크기를 지정합니다. 값으로는 픽셀 값, 퍼센트 값, 그리고 "cover"와 "contain"을 사용할 수 있습니다. "cover"는 배경 이미지가 요소의 모든 공간을 채우도록 조절되며, "contain"은 배경 이미지가 요소 내에서 적절히 보여지도록 조절됩니다.

 

예:

body {
  background-color: lightblue;
  background-image: url("bg-image.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

이 코드는 body 요소에 대해 다음과 같이 설정합니다:
• background-color: 배경 색상을 lightblue로 설정합니다.
• background-image: 배경 이미지 URL을 bg-image.jpg로 지정합니다.
• background-repeat: 배경 이미지를 반복하지 않게 설정합니다.
• background-position: 배경 이미지의 위치를 중앙으로 설정합니다.
• background-size: 배경 이미지의 크기를 요소와 동일하게 설정합니다.

 

 

CSS background배경 이미지를 중첩하여 여러 개의 배경을 한 번에 지정할 수도 있습니다.

 

예:

body {
  background-image: 
    linear-gradient(to bottom, lightblue, white), 
    url("bg-image.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

이 코드에서 background-image는 먼저 linear-gradient 함수를 사용하여 lightblue에서 white로의 그라디언트를 지정한 다음, 배경 이미지 URL을 bg-image.jpg로 지정합니다. 두 개의 배경이 중첩되어 하나의 배경으로 지정됩니다.