css 배경 이미지에 대해서 알아보자. 배경색은 기본이라 넘어간다. {background-color: 색;}으로 쓰면 배경색은 지정이 끝난다. 배경 이미지는 조금 알고 넘어가야 할 부분이 있어 정리해보자.
.body {
background-image: url("1234.png");
}
이미지 지정 방법은 기본 이렇다.
요소의 넓이 보다 이미지가 작으면 기본 반복으로 표현된다.
이미지 반복 설정
.body {
background-image: url("1234.png");
background-repeat: repeat-x;
}
이미지 가로 반복 설정.
.body {
background-image: url("1234.png");
background-repeat: repeat-y;
}
이미지 세로 반복 설정.
.body {
background-image: url("1234.png");
background-repeat: no-repeat;
}
이미지 반복 없음 설정.
이미지 배경 위치
.body {
background-image: url("1234.png");
background-repeat: no-repeat;
background-position: right top;
}
이미지 고정(스크롤에 움직이지 않는 배경 이미지)
.body {
background-image: url("1234.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
.body {
background-image: url("1234.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: scroll;
}
배경 이미지가 스크롤과 같이 움직임.
배경 한번에 설정하기.
.body {
background: #ffffff url("1234.png") no-reprat right top;
}
이렇게 한번에 설정이 가능하다. 배경색은 #ffffff고 배경 이미지는 1234.png인데 반복되지 않고 위치는 오른쪽 위.
배경이 적용 되는 우선순위
background-color
background-image
background-repeat
background-attachment
background-position