css background 속성에 대해 알아보자!

background

background 속성은 요소의 배경을 설정하는 단축 속성이다.

* {
  background: 색상 이미지경로 반복유무 위치 스크롤특성; //필요하지 않은 값은 사용하지 않아도 된다.
}

개별속성

• background-color  요소의 배경색을 지정해 줄 수 있다. 기본 값은 transparent 로 투명하다.
• background-image  url(경로) 로 요소의 배경이미지를 삽입할 수 있다.  " , " 로 구분해서 여러개의 배경이미지도 삽입가능하다. 
• background-size 요소의 배경이미지의 크기를 정해준다. 기본값은 배경이미지의 크기를 그대로 쓰는 auto 이고,
                               배경이미지를 요소의 x축과 y축 중 더 넓은 넓이의 영향을 받아 요소를 가득 채우지만 배경이미지는 잘릴수 있는                                     cover, 배경이미지를 요소의 x축과 y축 중 더 좁은 넓이의 영향을 받아 배경이미지는 다 표현되지만 요소의 빈공                                     간이 생길수 있는 contain 이 있다.                          
• background-repeat 요소에 삽입한 배경이미지의 반복 유무를 설정할 수 있다. 기본 값은 반복하는 repeat 이고
                                   x축으로만 반복하는 repeat-x , y축으로만 반복하는 repeat-y, 반복하지 않는 no-repeat 이 있다.
• background-position 요소에 배경이미지의 위치를 지정할수 있다. top, left, right, bottom, center로 방향을 지정할 수도 있고
                                      background-position: x축 y축;  px이나 % 단위도 사용할수 있다.
• background-attachment 요소가 스크롤 될때 배경이미지의 스크롤 여부를 정한다. 기본값은 scroll 이고,
                                            배경이미지가 스크롤이 되지않고 그자리를 유지하게 해주는fixed가 있다.