작성일자
카테고리 모바일/CSS3

웹페이지 제작시 기존에는 페이지 전체에 적용되는 배경이미지를 하나만 사용할 수 있었다.

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개의 이미지에 대해서 각각 위치를 달리해서 적용한다. 



저작자 표시
신고

티스토리 툴바