[CSS3] background 중첩 사용

CSS3 부터는 여러개의 배경이미지를 적용할 수 있다. (IE8 이하 버전에서는 사용할 수 없다.)

ch.png

bg.jpg

<style type="text/css">

body{background-image:url(images/ch.png), url(images/bg.jpg); background-size:280px 130px, 700px 150px; background-position:200px 20px ,0 0; background-repeat:no-repeat;}

</style>

- 여러개의 배경을 사용할 경우에는 왼쪽에 위차한 이미지가 앞으로 나온다.

- background-size, background-position 은 쉼표(,)를 이용해 두배경에 각각 설정 할 수 있다.

 bg.jpg , ch.png 중첩사용