background-repeat
배경 이미지의 타일링(반복) 방식을 제어합니다. 단일 이미지를 사용할 때는 bgrn(no-repeat)이 가장 많이 쓰이며, 패턴 배경에는 기본 반복이나 bgrs, bgrd를 활용합니다.
클래스 목록
| 클래스 | CSS | 설명 |
|---|---|---|
bgrr | background-repeat: repeat | 가로/세로 모두 반복 (기본값) |
bgrn | background-repeat: no-repeat | 반복하지 않음. 단일 이미지에 필수 |
bgrx | background-repeat: repeat-x | 가로 방향으로만 반복 |
bgry | background-repeat: repeat-y | 세로 방향으로만 반복 |
bgrs | background-repeat: space | 균등한 간격으로 반복 (잘리지 않음) |
bgrd | background-repeat: round | 이미지를 늘려서 빈 공간 없이 반복 |
사용 예시
<!-- 단일 배경 이미지 (가장 일반적) -->
<div class="bgrn bsc bgpc h40rem"></div>
<!-- 패턴 배경 (타일링) -->
<div class="bgrr h20rem"></div>
<!-- 가로 줄무늬 패턴 -->
<div class="bgrx h10rem"></div>
<!-- 세로 줄무늬 패턴 -->
<div class="bgry h10rem"></div>팁
사진 배경에는 bgrn
사진이나 일러스트 배경은 항상 bgrn을 사용하세요. 기본값은 repeat이므로 이미지가 반복됩니다.
space vs round
bgrs는 이미지 사이에 균등한 빈 공간을 넣고, bgrd는 이미지를 늘려서 빈 공간 없이 채웁니다.