Background

●background

 ▷HTML요소의 배경을 설정

 ▷아래의 모든 속성을 한 줄로 설정 가능

 ▷color image repeat position attachment 순

 

○background-color

 ▷배경색 설정 (color와 비슷)

 

○background-image

 ▷배경 이미지 설정

 ▷url(이미지 위치)

 

 ▶background-origin

  ▷배경 이미지의 시작 위치 설정

  ▷padding-box | border-box | content-box | inherit

 

 ▶background-clip

  ▷배경 이미지가 어디에서 잘릴지 결정

  ▷padding-box | border-box | content-box | inherit

 

○background-repeat

 ▷배경이미지의 반복 여부 (기본-x,y축 모두 반복)

 ▶종류

  ▷repeat : 기본, xy축 모두 반복

  ▷repeat-x : x축으로만 반복

  ▷repeat-y : y축으로만 반복

  ▷no-repeat : xy축 모두 반복

 

○background-position

 ▷반복되지 않는 배경이미지의 상대 위치

 ▷[left/center/right] [top/center/bottom]

 ▷%, px를 이용해 조절가능 (기준은 left top)

 

○background-attachment

 ▷fixed로 설정하면 이미지를 화면에 고정함 (스크롤과 무관하게 화면에서 이동하지 않음)