CSS / Reference / background-repeat

background-repeat는 배경 이미지의 반복 방향과 배치 방식을 정합니다. 반복을 없애려면 no-repeat, 가로만 반복하려면 repeat-x, 세로만 반복하려면 repeat-y를 사용합니다.

문법과 주요 값

초기값은 브라우저 기본 스타일시트가 HTML 요소에 적용한 값과 같다는 뜻이 아닙니다. 실제 값은 개발자 도구의 Computed에서 확인하세요.

.pattern { background-repeat: repeat; }
.hero { background-repeat: no-repeat; }

값과 적용 조건은 MDN background-repeat에서 확인할 수 있습니다.

실행 예제와 결과 비교

아래 전체 코드를 UTF-8 형식의 background-repeat-example.html 파일로 저장한 뒤 브라우저로 여세요. 예제용 CSS는 이 파일 안에만 넣고 사이트 전체 스타일시트에 그대로 붙여 넣지 않습니다.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>background-repeat 비교 예제</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.target, .reference { width: 240px; height: 150px; border: 12px dashed #718096; padding: 20px; background-color: #eaf2f8; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80'%3E%3Crect width='160' height='80' fill='%23006c9c'/%3E%3Ccircle cx='40' cy='40' r='24' fill='%23ffd166'/%3E%3C/svg%3E"); background-repeat: no-repeat; }
.target, .reference { background-size: 80px 40px; }
.target { background-repeat: repeat; }
.reference { background-repeat: no-repeat; }

/* 좁은 화면에서 실습 외곽을 맞춥니다. */
.target, .reference { max-width: calc(100vw - 48px - 64px); }
</style>
</head>
<body>
<main id="demo">
<h1>background-repeat 적용 비교</h1>
<section class="samples"><div class="a"><p class="label">repeat</p><div class="target"></div></div><div class="b"><p class="label">no-repeat</p><div class="reference"></div></div></section>
</main>
</body>
</html>

같은 크기의 도형이 첫 박스에서는 반복되고 두 번째 박스에서는 한 번만 나타납니다. 타일 크기를 바꾸면 반복 개수도 바뀝니다.

두 축과 여러 배경

값 두 개를 쓰면 첫 값은 가로, 두 번째는 세로 방향입니다. repeat no-repeat는 repeat-x와 같은 목적의 표현입니다. 여러 background-image를 지정했다면 쉼표로 각 레이어의 반복 설정을 구분합니다.

space와 round의 차이

space는 가능한 한 타일을 자르지 않고 배치하면서 남는 공간을 타일 사이에 분배합니다. round는 정수 개의 타일이 들어가도록 크기를 조절해 이음새가 달라질 수 있습니다. 이미지 비율과 background-size를 함께 확인하고 패턴 가장자리도 살펴보세요.

타일 크기가 맞아떨어지지 않을 때

다음 전체 문서를 css-reference-10571-practice.html로 UTF-8 저장한 뒤 브라우저에서 엽니다. 다른 예제 파일에 중첩해서 붙이지 않고 별도 파일로 시험합니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>타일 크기가 맞아떨어지지 않을 때</title>
  <style>
    body { margin: 16px; color: #20242b; font: 16px/1.7 sans-serif; }
    main { max-width: 52rem; margin: auto; }
    h1 { font-size: 1.35rem; }
    .samples { display: flex; flex-wrap: wrap; gap: 24px; }
    .samples > * { max-width: 100%; min-width: 0; }
    :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
.tile { width:220px;height:120px;max-width:100%;background-color:#e6f2ff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40'%3E%3Crect width='80' height='40' fill='%23006c9c'/%3E%3Ccircle cx='20' cy='20' r='12' fill='%23ffd166'/%3E%3C/svg%3E");background-size:80px 40px;background-position:center; }
  </style>
</head>
<body>
<main>
  <h1>타일 크기가 맞아떨어지지 않을 때</h1>
<p>repeat</p><div class="tile" style="background-repeat:repeat"></div><p>no-repeat</p><div class="tile" style="background-repeat:no-repeat"></div><p>space</p><div class="tile" style="background-repeat:space"></div><p>round</p><div class="tile" style="background-repeat:round"></div>
</main>
</body>
</html>

repeat는 가장자리 타일이 잘릴 수 있고, space는 온전한 타일 사이 간격을 조절하며, round는 타일 크기를 조정합니다. 같은 요소에서 반복값만 바꾸고 220px·80px을 유지하세요. space의 한 축에 타일이 하나만 들어갈 때는 그 축의 position도 관찰하고 원래 값으로 복구합니다.

이 별도 실습에서 round는 가로 80px 타일을 220px에 세 번 맞추므로 약 73.33px로 줄입니다. 세로는 40px 타일이 세 번 정확히 들어가므로 그대로입니다. 축별 조정 조건이 달라 고유 비율이 달라질 수 있다는 점도 관찰하세요.

여러 배경 속성을 한 화면에서 조합하려면 배경색과 배경 이미지 설정하기를 참고하세요. 본문의 조건과 함께 비교할 관련 속성은 background-size입니다.

적용되지 않거나 예상과 다를 때

• 배경 단축 속성이 뒤에서 repeat 설정을 다시 기본값으로 만드는지 확인합니다.
• 예상보다 많은 타일이 보이면 background-size와 원본 이미지 크기를 확인합니다.