Backgrounds and borders/Using multiple backgrounds

김동현·2026년 3월 18일

mdn 학습 번역 - CSS

목록 보기

39/190

화면을 구현하다 보면 디자인 툴(Figma 등)에서 본 멋진 겹침 효과를 CSS로 어떻게 풀어낼지 고민될 때가 많죠? 특히 웹 프로필 페이지의 화려한 헤더나, 카드 UI의 배경을 꾸밀 때 한 장의 이미지만으로는 부족할 때가 있습니다. 이럴 때 HTML 구조를 복잡하게 만들지 않고도 해결할 수 있는 마법 같은 방법이 바로 오늘 배울 '다중 배경(Multiple backgrounds)'입니다.

다중 배경 사용하기 (Using multiple backgrounds)

요소에 여러 개의 배경(multiple backgrounds)을 적용할 수 있습니다. 이 배경들은 서로의 위에 층층이 쌓이게 되는데, 여러분이 코드에 가장 먼저 적은 배경이 맨 위에 위치하고, 가장 마지막에 적은 배경이 맨 아래(뒤쪽)에 깔리게 됩니다. 오직 가장 마지막에 적힌 배경만이 배경색(background-color)을 포함할 수 있습니다.

다중 배경은 background: background1, background2, ...;와 같이 쉼표로 구분된 목록으로 지정합니다. 이 문법은 단축 속성인 background뿐만 아니라, background-color를 제외한 다음과 같은 개별 배경 속성들에서도 모두 사용할 수 있습니다.

이 문서의 내용 (In this article)

예제 (Example)
다중 배경을 위한 값 반복 (Value repetition for multiple backgrounds)
참고 자료 (See also)

예제 (Example)

이 예제에서는 세 개의 배경이 쌓여 있습니다. Firefox 로고, 비눗방울 이미지, 그리고 선형 그래디언트(linear gradient)입니다.

💡 강사 팁:
이 기법은 실무에서 정말 자주 쓰입니다! 예를 들어 책 표지 이미지를 배경으로 깔고 그 위에 어두운 그래디언트를 다중 배경으로 겹쳐주면 흰색 글씨가 아주 또렷하게 잘 보이게 만들 수 있죠. 별도의 덮어씌우기용 <div>를 만들지 않아도 되니 DOM 트리도 훨씬 깔끔해집니다.

HTML

<div class="multi-bg-example"></div>

CSS

.multi-bg-example {
  width: 100%;
  height: 400px;
  background-image:
    url("firefox.png"), url("bubbles.png"),
    linear-gradient(to right, rgb(30 75 115 / 100%), transparent);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position:
    bottom right,
    left,
    right;
}

결과 (Result)

여기서 보실 수 있듯이, Firefox 로고(background-image에서 제일 먼저 나열됨)가 맨 위로 올라와 비눗방울 그래픽 바로 위에 자리 잡습니다. 그 뒤를 이어 그래디언트(제일 마지막에 나열됨)가 이전의 모든 '이미지'들 아래에 깔리게 됩니다.

각각 이어지는 하위 속성들(background-repeat과 background-position)은 순서대로 대응되는 배경에 적용됩니다. 즉, background-repeat에 적힌 첫 번째 값은 첫 번째(가장 맨 앞의) 배경에 적용되고, 나머지도 같은 방식으로 적용되는 것이죠.

다중 배경을 위한 값 반복 (Value repetition for multiple backgrounds)

다중 배경을 사용할 때, 배경 관련 속성에 쉼표로 구분된 값의 개수가 전체 배경 레이어의 개수보다 적게 주어지면 어떻게 될까요? 브라우저(사용자 에이전트)는 모든 레이어에 값이 할당될 수 있도록 주어진 값의 목록을 계속해서 반복(repeat)합니다.

예를 들어봅시다:

.element {
  background-image: url(a.png), url(b.png), url(c.png);
  background-position: left top;
}

이 코드는 아래의 코드와 완전히 동일하게 동작합니다:

.element {
  background-position:
    left top,
    left top,
    left top;
}

💡 강사 팁:
코드를 확 줄여주는 고마운 기능이지만, 가끔 의도치 않은 동작을 만들기도 합니다. Storybook 같은 환경에서 배경 관련 UI 컴포넌트를 테스트할 때, 값이 알아서 반복된다는 사실을 놓치면 "어? 왜 두 번째 이미지도 첫 번째랑 똑같은 위치에 가 있지?" 하고 당황할 수 있으니 꼭 기억해 두세요!