CSS 배경(background)

 background-position : 배경 이미지 위치 조절

background-position: [수평위치] [수직위치];

수평위치 : left | center | right | 백분율(%) | 길이값(px)

수직위치 : top | center | botoom | 백분율(%) | 길이값(px)

background-size : 배경 이미지 크기 조절

background-size: auto | contain | cover | 백분율(%) | 크기값(px);

1. background-size: auto;
   원래 배경 이미지 크기 그대로 표시된다.
2. background-size: container;
   요소 안에 배경이미지 전체가 표시되도록 확대하거나 축소한다.
3. background-size: cover;
   요소 전체를 모두 덮도록 배경이미지를 확대하거나 축소한다.
4. background-size: 백분율(%);
   요소의 크기를 기준으로 주어진 백분율 만큼 너비와 높이를 채워서 표시한다.
5. background-size: 크기값(px);
   지정된 크기값 만큼 너비와 높이를 채워서 표시한다.

background-origin : 배경 이미지를 배치할 기준 조절

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

1. background-origin: border-box;
   박스 모델의 가장 외곽인 테두리(border) 부터 시작된다.
2. background-origin: padding-box;
   박스 모델의 padding 영역부터 시작된다.
3. background-origin: content-box;
   콘텐츠 영역부터 시작된다.

background-attachment : 배경 이미지 고정하기

background-attachment: scroll | fixed;

1. background-attachment: scroll;
   화면 스크롤과 함께 배경 이미지도 스크롤된다. 기본값
2. background-attachment: fixed;
   화면이 스크롤되더라도 배경 이미지는 고정된다.