[background] CSS - Multi Background 구문 - 한번에 여러 배경 속성값 사용

목차

1. Multi Background 정의 - 한번에 여러 배경 속성값 사용
2. Multi Background 구문
3. Multi Background 예제

Multi Background 정의 - 한번에 여러 배경 속성값 사용

 

background-color 속성 제외한 나머지 배경 관련 속성은 한번에 여러 속성값을 나열해 사용 가능.

---

 

1. 여러 속성값 지원 배경 속성

• background - 배경 단축 속성
• background-attachment - 배경이미지 고정 여부
• background-clip - 배경 영역
• background-image - 배경이미지 주소
• background-origin - 배경이미지 좌표시작점
• background-position - 배경이미지 위치
• background-repeat - 배경이미지 반복
• background-size - 배경이미지 크기

 

2.
나열된 속성값은 계층적으로 적용. (∴ 이미지가 투명해야 아래 것이 보임.)

• 첫 번째 속성값: 맨 위
• 마지막 속성값: 맨 밑

 

3.

나열된 속성값은 각자 같은 자리끼리 적용됨.

• 첫 번째 속성값은 첫 번째 속성값끼리 연동 작용
• 마지막 속성값은 마지막 속성값끼리 연동 작용

 

Multi Background 구문

 

selector {background: bgValue1, bgValue2, ...}

 

PS. background 속성 자리에 background-color 속성 제외한 나머지 속성 가능.

Multi Background 예제

※ 각 속성이 여러 속성값 사용 시, 같은 순번끼리 작동.

 

<style>

.hz {

  padding:100px;

  background-image: 

      이미지주소1, 

      이미지주소2,

      이미지주소3;

  background-repeat: 

      이미지주소1에 적용할 속성값,

      이미지주소2에 적용할 속성값,

      이미지주소3에 적용할 속성값,

  background-position: 

      이미지주소1에 적용할 속성값,

      이미지주소2에 적용할 속성값,

      이미지주소3에 적용할 속성값,

}

</style>

 

<div class="hz">홈짱닷컴 Homzzang.com</div>