AAtomic CSS

background-position

배경 이미지의 위치를 설정합니다. bgpc(center)가 가장 많이 사용되며, 이미지의 초점에 따라 방향을 조정합니다.

클래스 목록

클래스CSS설명
bgpcbackground-position: center가운데 정렬 (가장 일반적)
bgptbackground-position: top상단 정렬. 인물 사진에 적합
bgpbbackground-position: bottom하단 정렬
bgplbackground-position: left좌측 정렬
bgprbackground-position: right우측 정렬
bgptlbackground-position: top left좌상단
bgptrbackground-position: top right우상단
bgpblbackground-position: bottom left좌하단
bgpbrbackground-position: bottom right우하단

시각 도식

각 칸은 요소 하나이고 파란 사각형은 배경 이미지가 놓이는 자리입니다. 아홉 가지 값이 상자 안 어디에 이미지를 붙이는지 한눈에 비교할 수 있습니다.

bgptl

bgpt

bgptr

bgpl

bgpc

bgpr

bgpbl

bgpb

bgpbr

사용 예시

<!-- Center Background (Default Pattern) -->
<div class="bsc bgrn bgpc h40rem"></div>

<!-- Portrait photo — top focus -->
<div class="bsc bgrn bgpt h30rem br8px"></div>

<!-- Decorative image — bottom right placement -->
<div class="bsct bgrn bgpbr h20rem"></div>

클래스별 상세

bgpcbackground-position: center

가장 많이 쓰는 값입니다. 이미지를 상자 정중앙에 맞춥니다. cover로 꽉 채운 사진은 상하좌우가 고르게 잘려나가므로 피사체가 가운데 있는 사진에 잘 맞습니다.

<!-- Subject in the middle: crop evenly on every side -->
<div class="bgpc bsc bgrn h30rem br8px"></div>

bgptbackground-position: top

이미지 위쪽을 상자 위쪽에 붙입니다. 인물 사진에서 얼굴이 잘리는 사고를 막는 값이며, 하늘이나 헤드라인이 위에 있는 배너에도 씁니다.

<!-- Portrait: keep the face, crop the feet -->
<figure class="bgpt bsc bgrn h30rem w20rem br8px oh"></figure>

bgpbbackground-position: bottom

이미지 아래쪽을 상자 아래쪽에 붙입니다. 바닥선이 중요한 제품 컷이나, 아래쪽에 그림자와 지면이 있는 일러스트에 씁니다.

<!-- Product shot: keep the ground line and the shadow -->
<div class="bgpb bsc bgrn h20rem br8px"></div>

bgplbackground-position: left

이미지 왼쪽 끝을 상자 왼쪽에 붙입니다. 오른쪽에 글자를 얹는 분할 배너에서 사진을 왼쪽에 고정할 때 씁니다.

<!-- Split banner: photo pinned left, copy on the right -->
<section class="bgpl bsc bgrn h24rem br8px df jcfe aic p3-2rem">
  <p class="fs2rem fw700 cFFFFFF w50p">Copy sits on the right half</p>
</section>

bgprbackground-position: right

이미지 오른쪽 끝을 상자 오른쪽에 붙입니다. 왼쪽에 카피가 놓이는 히어로에서 이미지가 오른쪽으로 밀려나야 할 때 씁니다.

<!-- Hero: artwork pushed right, headline on the left -->
<section class="bgpr bsct bgrn h24rem br8px df aic p3-2rem">
  <h2 class="fs3-2rem fw800 cFFFFFF w50p">Headline on the left</h2>
</section>

bgptlbgptrbgpblbgpbr모서리 고정 값

네 모서리에 이미지를 딱 붙입니다. 배경 이미지를 반복 없이 장식 요소로 쓸 때, 예를 들어 카드 오른쪽 아래의 워터마크나 왼쪽 위의 로고 스탬프에 주로 씁니다.

<!-- Watermark stamped into the bottom right corner -->
<article class="bgpbr bgrn bsct p2rem bg18181B br8px">
  <h3 class="fs2rem fw700 cFAFAFA mb8px">Invoice 2024-118</h3>
  <p class="fs14px c71717A">The seal never repeats and never moves.</p>
</article>

<!-- Logo stamp in the top left -->
<div class="bgptl bgrn bsct p2rem bg18181B br8px">Branded panel</div>

실전 예시 — 프로필 카드와 워터마크 카드

인물 사진은 상단 고정, 장식 무늬는 우하단 고정으로 두는 실제 카드 조합입니다. 사진은 cover로 채우고 장식은 contain으로 원래 비율을 지킵니다.

<div class="dg gtcr2-1fr gap2rem">
  <!-- Portrait card: top anchored so the face survives the crop -->
  <article class="bg18181B b1pxsolid27272A br8px oh">
    <div class="bgpt bsc bgrn h20rem"></div>
    <div class="p2rem">
      <p class="fs16px fw600 cFAFAFA">Dana Whitfield</p>
      <p class="fs14px c71717A">Design engineer</p>
    </div>
  </article>

  <!-- Watermark card: ornament pinned bottom right, kept at natural ratio -->
  <article class="bgpbr bgrn bsct bg18181B b1pxsolid27272A br8px p2rem">
    <p class="fs12px ttu ls0-05em cA1A1AA mb8px">Receipt</p>
    <p class="fs2-4rem fw700 cFAFAFA mb8px">USD 1,240.00</p>
    <p class="fs14px c71717A">Paid on 12 March</p>
  </article>
</div>

팁 / 주의사항

cover 없이는 차이가 잘 안 보인다

이미지가 상자보다 작으면 남는 공간이 있어야 position이 의미를 갖습니다. 이미지가 상자를 정확히 채우고 있으면 어떤 값을 줘도 결과가 같습니다.

고정 배경에서는 뷰포트 기준이 된다

background-attachment가 fixed이면 위치 기준이 요소가 아니라 뷰포트가 됩니다. 요소 안에서 가운데로 보일 것이라 기대한 이미지가 화면 가운데로 이동합니다.

반복과 함께 쓰면 시작점만 바뀐다

배경이 반복 중이면 position은 타일이 시작하는 지점을 옮길 뿐 화면 전체가 채워지는 것은 그대로입니다. 위치 효과를 보고 싶다면 반복을 끄세요.

잘리는 방향을 먼저 정하고 값을 고를 것

cover는 넘치는 쪽을 잘라냅니다. 세로로 긴 사진을 가로 배너에 넣으면 위아래가 잘리므로 이때는 상단이나 하단 값이 실질적인 선택지입니다.

cover와 함께 사용

bsc로 채울 때 잘리는 영역이 달라지므로, position으로 초점을 제어하세요. 인물 사진은 bgpt(상단)가 적합합니다.

background-sizebackground-repeatbackground-attachmentbackground-originbackground-clipbackground