background-color

• 배경색 지정하기

title	desc
16진수	색상을 세밀하게 조정 가능 background-color: #0000ff;
rgba	alpha값으로 투명도 조절 가능 background-color: rbga(0, 0, 255, .5);
색상 이름	원색사용 background-color: blue;

background-clip

• 배경 적용 범위 조절하기

  박스모델

title	desc
border-box	박스 모델의 가장 외곽 테두리라인까지 적용(default)
padding-box	박스 모델의 테두리를 뺀 패딩 범위까지 적용
content-box	박스 모델의 내용 부분에 적용

background-image

• 배경 이미지 삽입
• 배경 이미지에는 웹에서 사용 가능한 파일 (jpg, png, gif)파일을 사용
  ex. background-image: url("images/bg.jpg");
  절대경로로도 사용가능

background-repeat

• 배경 이미지 반복

title	desc
repeat	브라우저 화면에 가득 찰 때까지 배경이미지를 가로와 세로로 반복(default)
repeat-x	브라우저 창 너비와 같아질 때까지 배경이미지를 가로로 반복
repeat-y	브라우저 창 높이와 같아질 때까지 배경이미지를 세로로 반복
no-repeat	배경이미지를 반복하지 않음

background-size

• 배경 이미지 크기 조절

title	desc
auto	이미지의 원본 크기 그대로 표시(default)
contain	이미지의 비율을 유지하고자 할 때 사용하는 옵션 부모요소 내부에 비율이 고정된 이미지가 들어감 이미지의 가로와 세로 중 큰 값을 기준으로 비율이 고정됨
cover	이미지의 비율을 유지하고자 할 때 사용하는 옵션 요소의 가로와 세로에 이미지를 맞추면서 비율을 유지하기 위해 이미지를 확대/축소 시킴
크기값	너비값과 높이값을 지정 너비 값만 지정할 경우 이미지의 크기를 기준으로 비율을 자동으로 계산해 높이값 지정
백분율	배경 이미지가 들어갈 요소의 크기를 기준으로 백분율값을 지정하고 그 크기에 맞도록 배경 이미지를 확대/축소

background-position

• 배경 이미지 위치 조절
• 값을 하나만 지정할 경우, 그 값은 수평 위치 값으로 간주하고 수직 위치의 값은 50% 또는 center로 간주함

background-position: <수평위치> <수직위치>;
수평위치: left | center | right | <백분율> | <길이값>;
수직위치: top | center | bottom | <백분율> | <길이값>;

background-origin

• 배경 이미지 배치할 기준
• 배경 이미지를 브라우저 창의 중앙 하단에 배치하는 경우: background-position: center bottom;
• background-position: center center;의 경우: background-position: center;로 줄여 쓸 수 있음

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

title	desc
boder-box	박스 모델의 가장 외곽인 테두리가 기준
padding-box	박스 모델의 테두리를 뺀 패딩이 기준
content-box	박스 모델에서 내용 부분이 기준

background-attachment

• 배경 이미지 고정
  background-attachment: scroll | fixed;

title	desc
scroll	화면 스크롤과 배경 이미지도 스크롤(default)
fixed	화면이 스크롤되더라도 배경 이미지는 고정

background

• 속성 하나로 배경 이미지 제어
  background: url('images/bg.jpg') no-repeat fixed right bottom;