한 번에 여러 배경 사용하기

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

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

css

.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

html

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

CSS

css

.multi-bg-example {
  width: 100%;
  height: 400px;
  background-image: url(firefox.png), url(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의 첫 번째 값은 처음(맨 위) 배경에 적용되고, 두 번째와 두 번째 배경, 세 번째와 세 번째 배경...도 같습니다.

같이 보기

CSS 그레이디언트 사용하기