AAtomic CSS

background-repeat

배경 이미지의 타일링(반복) 방식을 제어합니다. 단일 이미지를 사용할 때는 bgrn(no-repeat)이 가장 많이 쓰이며, 패턴 배경에는 기본 반복이나 bgrs, bgrd를 활용합니다.

클래스 목록

클래스CSS설명
bgrrbackground-repeat: repeat가로/세로 모두 반복 (기본값)
bgrnbackground-repeat: no-repeat반복하지 않음. 단일 이미지에 필수
bgrxbackground-repeat: repeat-x가로 방향으로만 반복
bgrybackground-repeat: repeat-y세로 방향으로만 반복
bgrsbackground-repeat: space균등한 간격으로 반복 (잘리지 않음)
bgrdbackground-repeat: round이미지를 늘려서 빈 공간 없이 반복

시각 도식

각 상자는 요소 하나이고 파란 사각형 하나가 배경 이미지 타일 하나입니다. 여섯 가지 값이 타일을 어떻게 깔아 놓는지를 재현했습니다.

bgrr

bgrn

bgrx

bgry

bgrs

bgrd

사용 예시

<!-- Single background image (most common) -->
<div class="bgrn bsc bgpc h40rem"></div>

<!-- Pattern background (tiling) -->
<div class="bgrr h20rem"></div>

<!-- Horizontal stripe pattern -->
<div class="bgrx h10rem"></div>

<!-- Vertical stripe pattern -->
<div class="bgry h10rem"></div>

클래스별 상세

bgrrbackground-repeat: repeat

기본값입니다. 이미지를 가로 세로 양방향으로 끝없이 깔아 요소를 덮습니다. 마지막 줄과 마지막 열은 요소 경계에서 잘려 나갑니다.

<!-- Seamless texture across a whole section -->
<section class="bgrr py6rem px3-2rem">
  <h2 class="fs3-2rem fw800 cFAFAFA">Tiled texture backdrop</h2>
</section>

bgrnbackground-repeat: no-repeat

반복을 끕니다. 사진, 일러스트, 로고처럼 한 번만 보여야 하는 이미지에는 사실상 필수입니다. 보통 위치와 크기 클래스를 함께 붙여 씁니다.

<!-- One photo, once, centered, filling the box -->
<div class="bgrn bgpc bsc h30rem br8px"></div>

bgrxbackground-repeat: repeat-x

가로 한 줄만 반복합니다. 상단 구분선 무늬, 종이 접힘 자국, 반복되는 톱니 모양 구분자처럼 가로로만 이어지는 장식에 씁니다.

<!-- Decorative rule that runs along the top edge only -->
<div class="bgrx bgpt h4rem w100p"></div>

bgrybackground-repeat: repeat-y

세로 한 줄만 반복합니다. 왼쪽 눈금자 무늬, 타임라인 세로선, 사이드바 테두리 장식에 씁니다.

<!-- Rail that runs down the left edge of a timeline -->
<aside class="bgry bgpl w4rem h40rem"></aside>

bgrsbackground-repeat: space

잘리지 않는 정수 개수만 깔고 남는 공간을 타일 사이 간격으로 균등 배분합니다. 아이콘 패턴처럼 타일이 잘리면 안 되는 무늬에 적합합니다.

<!-- Icon pattern: whole tiles only, gaps absorb the remainder -->
<div class="bgrs h20rem br8px b1pxsolid27272A"></div>

bgrdbackground-repeat: round

타일 크기를 조금 늘리거나 줄여 정수 개수가 딱 맞게 만듭니다. 간격 없이 이어지는 격자 무늬에 적합하지만 원본 비율이 살짝 변형됩니다.

<!-- Connected grid: tiles resize so a whole number fits -->
<div class="bgrd h20rem br8px b1pxsolid27272A"></div>

실전 예시 — 격자 배경과 상단 무늬 띠

대시보드 배경에 깔리는 격자 무늬와, 섹션 상단에만 놓이는 가로 반복 띠 조합입니다. 두 요소가 서로 다른 반복 값을 쓰는 실제 화면 구성입니다.

<main class="bgrr minh100vh">
  <!-- Grid texture tiles behind the whole dashboard -->

  <section class="pr p3-2rem bg18181B br8px m2rem">
    <!-- Zigzag band repeating across the top of the card only -->
    <div class="bgrx bgpt pa t0 l0 w100p h8px"></div>

    <h2 class="fs2-4rem fw700 cFAFAFA mb8px mt16px">Weekly traffic</h2>
    <p class="fs14px c71717A">The backdrop tiles in both axes, the band only across.</p>
  </section>
</main>

팁 / 주의사항

기본값이 반복이라는 점을 잊지 말 것

값을 지정하지 않으면 repeat입니다. 큰 사진 하나를 넣었는데 크기가 작아 화면 여기저기 겹쳐 보인다면 대부분 반복을 끄지 않은 탓입니다.

cover와 함께 쓰면 반복이 무의미해진다

이미지가 요소를 이미 다 덮고 있으면 반복될 자리가 없습니다. 반복 값을 바꿔도 화면이 그대로라면 크기 설정을 먼저 확인하세요.

space와 round는 크기 계산이 다르다

space는 타일 크기를 유지한 채 간격을 늘리고, round는 간격 없이 타일 크기를 조정합니다. 아이콘 무늬는 space, 이어져야 하는 격자는 round가 맞습니다.

타일 이음매는 이미지 자체로 해결해야 한다

반복 값은 이음매를 매끄럽게 만들어 주지 않습니다. 격자나 노이즈 무늬는 이미지 파일 자체가 좌우 상하로 이어지도록 제작되어야 합니다.

축별로 다르게 지정하려면 값이 두 개 필요하다

가로만 반복하고 세로는 막는 조합은 가로 반복 클래스로 표현합니다. 축마다 space와 round를 따로 섞는 조합은 이 클래스 집합으로는 표현되지 않으므로 이미지 크기 쪽에서 해결하세요.

사진 배경에는 bgrn

사진이나 일러스트 배경은 항상 bgrn을 사용하세요. 기본값은 repeat이므로 이미지가 반복됩니다.

space vs round

bgrs는 이미지 사이에 균등한 빈 공간을 넣고, bgrd는 이미지를 늘려서 빈 공간 없이 채웁니다.

background-sizebackground-positionbackground-attachmentbackground-clipbackground-originbackground