배경 속성 (background)

1. background-color 속성

배경색 지정, 색상 단위 입력 (디폴트: 하얀색)

 

2. background-image 속성

배경 이미지 지정, url 단위 입력

1) background-repeat : 배경 이미지의 반복형태 지정

- repeat-x : x축으로 반복

- repeat-y : y축으로 반복

- repeat : x, y축으로 반복

- 디폴트 repeat, 싫으면 no-repeat

2) background-position: 배경이미지의 위치 지정

- x축위치 y축위치

- 키워드: top, bottom, right, left, center

3) background-size : 배경 이미지의 크기 지정

- width height

- cover: 이미지의 비율을 유지한 상태에서, 부모요소의 width와 height 중 큰 값에 배경이미지를 맞추고 나머지는 비율로 계산하여 맞춰줌

4) background-attachment : 배경 이미지를 어떤 방식으로 화면에 붙일지 지정

- fixed : 상대적 위치, 스크롤 아무리 내려도 화면상에 그 자리에 fixed

- scroll : 절대적인 위치, 스크롤 내리면 사라진다.

​