9. 배경 속성

- 박스 모델에서 padding과 content 영역은 모델의 배경을 나타냄

- 배경 속성 : 박스 모델의 배경에 색상,이미지 같은 스타일 지정

1. background-color 속성

- 요소의 배경에 색상을 넣음

- 속성값으로는 색상값 사용

/* 형식 */
background-color:색상값;

2. background-image 속성

- 요소 배경에 이미지를 넣음

- 속성값은 이미지의 경로(url함수 이용)

/* 형식 */
background-image:url('이미지 경로');

-사용시 주의사항

1. 요소의 배경 크기가 있어야 됨,배경에 이미지를 넣기 때문
2. 이미지의 크기가 요소 배경 크기랑 다르면 어색함, 이미지가 작으면 가로로 반복되어 채워짐/ 크면 잘려서 채워짐

3. background-repeat 속성

-요소 배경 크기가 이미지보다 클때 해결방법

-이미지 반복 설정 바꿀 때 사용

/* 형식 */
background-repeat:속성값;

속성값은 다음과 같다

• no-repaeat :이미지 반복 안함
• repeat-x : 가로로 이미지 반복
• repaeat-y : 세로로 이미지 반복
• repeat : 가로, 세로로 이미지 반복
• round : 이미지를 딱 맞게 조절해서 반복
• space : 이미지 안 잘리게 반복

4. background-size 속성

-이미지가 요소 배경 크기보다 클때 해결법

-이미지 크기를 지정함

/* 형식 */
background-size:속성값;

속성값은 다음과 같다

• auto : 이미지 크기 유지
• cover : 비율유지하면서 배경에 맞츰,대신 좀 짤릴 수도 있음
• contain : 비율유지하면서 배경에 맞춤,대신 짤릴거 같으면 조정을 멈추고 남은 부분 반복으로 채움
• 너비 높이 : 너비 높이 직접 지정

5. background-position 속성

- 삽입하려는 이미지 위치 결정

/* 형식 */
background-position:x위치 y위치;

속성값은 다음과 같다

• x위치 사용 속성값 : left,center,right - x축 방향 위치 지정
• y위치 사용 속성값 : top,center,bottom - y축 방향 위치 지정
• 공통 사용 속성값 : px,rem,em,%

-값을 하나만 사용할수도 있음, 그러면 지정한 값은 x축이 되고 y축은 center가 기본임

6. background-attachment 속성

- 이미지를 스크롤할 때 방식 결정

/* 형식 */
background-attachment:속성값;

속성값은 다음과 같음

• local : 요소와 브라우저에서 모두 스크롤
• scroll : 요소에서는 고정, 브라우저에서는 스크롤
• fixed : 요소 웹 브라우저 모두 고정

7. background 속성

- 지금까지의 background-속성 한번에 지정 가능

- 순서는 상관없음, 띄어쓰기로 구분

- background-size만 background-position 속성값 뒤에 /로 구분해서 사용

/* 형식 */
background:color속성값 image속성값 repaeat속성값 position속성값/size속성값 attachment속성값