background-position
배경 이미지의 위치를 설정합니다. bgpc(center)가 가장 많이 사용되며, 이미지의 초점에 따라 방향을 조정합니다.
클래스 목록
| 클래스 | CSS | 설명 |
|---|---|---|
bgpc | background-position: center | 가운데 정렬 (가장 일반적) |
bgpt | background-position: top | 상단 정렬. 인물 사진에 적합 |
bgpb | background-position: bottom | 하단 정렬 |
bgpl | background-position: left | 좌측 정렬 |
bgpr | background-position: right | 우측 정렬 |
bgptl | background-position: top left | 좌상단 |
bgptr | background-position: top right | 우상단 |
bgpbl | background-position: bottom left | 좌하단 |
bgpbr | background-position: bottom right | 우하단 |
사용 예시
<!-- 가운데 배경 (기본 패턴) -->
<div class="bsc bgrn bgpc h40rem"></div>
<!-- 인물 사진 — 상단 초점 -->
<div class="bsc bgrn bgpt h30rem br8px"></div>
<!-- 장식 이미지 — 우하단 배치 -->
<div class="bsct bgrn bgpbr h20rem"></div>팁
cover와 함께 사용
bsc로 채울 때 잘리는 영역이 달라지므로, position으로 초점을 제어하세요. 인물 사진은 bgpt(상단)가 적합합니다.