[CSS] background-image로 배경 이미지 적용

CSS에서는 요소의 배경에 이미지를 적용할 수 있습니다.
대표적으로 background-image와 관련 속성들을 함께 사용합니다.

.card {
  background-image: url('pizza.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

 

1. background-image

background-image: url('pizza.png');

• 요소의 배경 이미지를 지정
• 이미지 경로는 CSS 파일 기준

<img> 태그와 달리 레이아웃 요소의 배경으로 사용됨

 

2. background-repeat

background-repeat: no-repeat;

• 기본값은 repeat
• 이미지를 반복하지 않고 한 번만 표시

 배경 이미지가 타일처럼 반복되는 것을 방지

 

3. background-position

background-position: center;

• 배경 이미지의 위치 지정
• center, top, bottom, left, right 조합 가능

이미지를 요소의 중앙에 정렬

 

4. background-size

background-size: cover;

• 이미지 크기 조절
• cover:
  • 요소를 가득 채우도록 확대
  • 비율 유지
  • 일부 영역이 잘릴 수 있음

카드, 배너, 썸네일에 자주 사용

 

 

정리하면

 

background-image는 요소의 배경에 이미지를 적용하고,
no-repeat, center, cover 조합은
반응형 배경 이미지를 만들 때 가장 많이 사용된다.