웹페이지 제작시 기존에는 페이지 전체에 적용되는 배경이미지를 하나만 사용할 수 있었다.
css3에서는 여러개의 배경이미지를 사용할 수 있다.
body {
background-image:url("images/bg.jpg"),
url("images/footer.jpg");
background-repeat:
repeat-x;
background-position: top center, bottom center;
}
여러개의 속성값을 부여할 때는 콤마를 사용해서 분리한다.
background-repeat의 경우 속성값이 하나이면 두개의 이미지에 대해서 같은 값을 부여하게 된다.
포지션은 서로 다르게 해서 상단 배경이미지와 하단 배경이미지로 분리한다.
배경이미지는 전체 배경뿐만 아니라 div태그의 배경에도 적용할 수 있다.
.box {
background-image:
url(/img/top-left.gif),
url(/img/top-right.gif),
url(/img/bottom-left.gif),
url(/img/bottom-right.gif);
background-repeat:
no-repeat,
no-repeat,
no-repeat,
no-repeat;
background-position: top
left,
top
right,
bottom
left,
bottom right;
}
4개의 이미지에 대해서 각각 위치를 달리해서 적용한다.
