- background-image: url(이미지경로)
배경 이미지의 경로를 지정합니다.
- background-repeat (no-repeat/repeat/repeat-x/repeat-y)
배경 이미지의 배열이나 한번 사용 할 것인지 반복 할 것인지를 지정합니다.
no-repeat : 배경 이미지 한번만 사용
repeat : 배경 이미지가 웹 페이지 전체적으로 반복 사용
repeat-x : 배경 이미지가 가로 방향으로만 반복 사용
repeat-y : 배경 이미지가 세로 방향으로만 반복사용
- background-attachment: fixed
<BODY> 태그에서 background를 사용 했다면 태그 속성중에 bgproperties속성과 같이 배경 이미지를 고정 합니다.
background-attachment (fixed:고정/scroll:고정하지 않고 움직임)
- background-position: center center
배경 이미지의 위치를 지정합니다.
위에서 no-repeat 과 fixed를 사용 했기 때문에 브라우저 기준으로 중앙에 위치 됩니다.
위에서 background-repeat (repeat-x/repeat-y) 이 두 속성을 사용 했다면
repeat-x 인 경우에는 수평 정렬 되며 값으로(left/center/right)가 사용 되고
repeat-y 인 경우에는 수직 정렬 되며 값으로(top/center/bottom)이 사용 됩니다.
(%)로 사용 가능 합니다.
* background-position 사용예
오른쪽 상단
BODY {background: url(이미지 경로) no-repeat fixed right top}
오른쪽 중간
BODY {background: url(이미지 경로) no-repeat fixed right center}
오른쪽 하단
BODY {background: url(이미지 경로) no-repeat fixed right bottom}
왼쪽 상단
BODY {background: url(이미지 경로) no-repeat fixed left top}
왼쪽 중간
BODY {background: url(이미지 경로) no-repeat fixed left center}
왼쪽 하단
BODY {background: url(이미지 경로) no-repeat fixed left bottom}
중간 상단
BODY {background: url(이미지 경로) no-repeat fixed center top}
중간 중간(정중앙)
BODY {background: url(이미지 경로) no-repeat fixed center center}
중간 하단
BODY {background: url(이미지 경로) no-repeat fixed center bottom}