다수의 배경을 요소에 적용할 수도 있습니다. 첫 번째 배경이 맨 위에, 마지막 배경이 맨 밑에 위치하는 레이어 구조를 사용하게 됩니다. 마지막 배경에만 배경색을 적용할 수 있습니다.

여러 배경을 적용하는건 쉽습니다.

.myclass {
  background: background1, background 2, ..., backgroundN;
}

background 단축 속성뿐 아니라 background-color를 제외한 단일 속성에서도 사용할 수 있습니다. 즉, background, background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size에는 목록을 값으로 지정할 수 있습니다.

예제

다음 예제는 Firefox 로고, 거품, 선형 그레이디언트 총 세 개의 배경을 사용합니다.

HTML

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

CSS

.multi-bg-example {
  width: 100%;
  height: 400px;
  background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png),
      url(https://mdn.mozillademos.org/files/11307/bubbles.png),
      linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
  background-repeat: no-repeat,
      no-repeat,
      no-repeat;
  background-position: bottom right,
      left,
      right;
}

결과

결과에서 볼 수 있듯, background-image에서 첫 번째로 지정한 Firefox 로고가 맨 위, 그 다음이 거품 그림이고 선형 그레이디언트는 모든 '이미지' 밑에 위치합니다. 하위 속성(background-repeat, background-position)의 각 값도 순서에 맞는 배경에 적용됩니다. 따라서 background-repeat의 첫 번째 값은 처음(맨 위) 배경에 적용되고, 두 번째와 두 번째 배경, 세 번째와 세 번째 배경...도 같습니다.

같이 보기

문서 태그 및 공헌자

이 페이지의 공헌자: mdnwebdocs-bot, alattalatta, yangtaeho
최종 변경자: mdnwebdocs-bot,