두개 이상의 배경이미지 사용하기
보기
소스
<div style="border:1px solid gray; background-image:url('http://superkts.com/img/css/flower01.gif'), url('http://superkts.com/img/css/flower11.gif'); height:200px;"></div>
<div style="border:1px solid gray; background-image:url('http://superkts.com/img/css/flower11.gif'), url('http://superkts.com/img/css/flower01.gif'); height:200px;"></div>
설명
- ,(컴마) 로 구분하여 나열해 주면됩니다.
- 먼저 지정하는 이미지가 위에 표시됩니다.
- 위 예제는 배경이 투명한 gif 이미지 두개의 순서를 다르게하여 만들어 보았습니다.
배경이미지 두개 적용 다른 예
보기
소스
설명
- background-image : url('이미지1 경로'), url('이미지2 경로')
- background-repeat : repeat-x, repeat-x
- background-position : top, bottom 각각의 속성을 , 로 구분하여 개별 설정했습니다.
repeat-x 는 같은것이 두개 사용되었는데 이럴때는 하나만 사용해도 동일하게 적용됩니다.
- background-repeat : repeat-x 이렇게요