본문으로 건너뛰기
실습하기

배경(Background)

배경은 웹 페이지의 시각적 특성을 꾸미는 중요한 요소입니다.

CSS의 background-color, background-image, background-position 등 다양한 배경 속성을 사용해 웹 페이지 배경을 다채롭게 꾸밀 수 있습니다.


background-color​

background-color는 요소의 배경색을 지정합니다.

예시:

CSS
div {
  background-color: pink;
}

이렇게 하면 div의 배경 색상이 분홍색이 됩니다.


background-image​

이미지를 요소의 배경으로 설정합니다.

예시:

CSS
div {
  background-image: url('https://picsum.photos/500');
}

위와 같이 이미지의 경로를 지정해 div의 배경으로 이미지를 설정할 수 있습니다.


background-repeat​

배경 이미지의 반복 여부를 결정합니다.

  • repeat: 이미지를 수평 및 수직으로 반복

  • repeat-x: 이미지를 수평으로만 반복

  • repeat-y: 이미지를 수직으로만 반복

  • no-repeat: 이미지를 반복하지 않음


예시:

CSS
div {
  background-image: url('https://picsum.photos/600');
  background-repeat: no-repeat;
}

이렇게 하면 배경 이미지가 한 번만 표시되고 반복되지 않습니다.


background-position​

배경 이미지의 위치를 지정합니다. 주로 x 축과 y 축의 값을 지정하여 위치를 조정합니다.

예시:

CSS
div {
  background-image: url('https://picsum.photos/600');
  background-position: center center;
}

이렇게 하면 이미지가 div의 중앙에 위치하게 됩니다.


background​

background 속성을 활용하면 위에서 언급한 모든 배경 속성을 한 번에 지정할 수 있습니다.

예시:

CSS
div {
  background: pink url('https://picsum.photos/200') no-repeat center center;
}

코드의 별표로 강조된 부분을 따라 입력해 보세요.

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!