[CSS 입문] 배경 색과 배경 이미지

1. background-color 속성 - 배경 색 지정

background-color:#0094ff;

2. bankgoround-clip 속성 - 배경 적용 범위 조절

속성 값	설명
boder-box	박스 모델의 가장 외곽인 테투리까지 적용한다.
padding-box	박스 모델에서 테두리를 뺀 패딩 범위까지 적용한다.
content-box	박스 모델에서 내용 부분에만 적용한다.

3. background-image 속성 - 웹 요소에 배경 이미지 넣기

background-image: url('images/bg1.png');

4. background-repeat 속성 - 배경 이미지 반복 방법 지정

속성 값	설명
repeat	브라우저 화면에 가득 찰 때까지 배경 이미지를 가로와 세로로 반복한다.
repaeat-x	브라우저 창 너비와 같아질 때까지 배경 이미지를 가로로 반복한다.
repeat-y	브라우저 창 높이와 같아질 때까지 배경 이미를 세로로 반복한다.
no-repeat	배경 이미지를 한 번만 표시하고 반복하지 않는다.

5. background-size 속성 - 배경 이미지 크기 조절

속성 값	설명
auto	원래 배경 이미지 크기만큼 표시한다.
contain	요소 안에 모든 배경 이미지가 표시되도록 확대하거나 축소한다.
cover	요소 전체를 모두 덮도록 배경 이미지를 확대하거나 축소한다.
<크기 값>	너비 값만 지정할 경우, 원래 배경 이미지 크기를 기준으로 축소/확대 비율을 자동으로 계산해 높이 값을 지정한다.
<백분율>	원래 배경 이미지 크기를 기준으로 확대하거나 축소한다.

6. background-position 속성 - 배경 이미지 위치 조절

bankground-positon: <수평 위치> <수직 위치>;

수평 위치 : left | center | right | <백분율> | <길이 값>

수직 위치 : left | center | right | <백분율> | <길이 값>

7. background-origin 속성 - 배경 이미지 배치할 기준 조절

background-origin: border-box | padding-box | content-box

8. background-attachment 속성 - 배경 이미지 고정

background-attachment: scroll | fixed

9. background 속성

배경 이미지 관련 속성을 background 속성으로 줄여 사용할 수 있습니다. 속성 값이 다르므로 입력 순서는 상관없습니다.

<출처> Do it! HTML5+CSS3 웹 표준의 정석