CSS - 속성(배경)

background

; 요소의 배경을 설정.

 

background-color

; 요소의 배경 색상을 지정.

background-image

; 요소의 배경에 하나 이상의 이미지를 삽입.

background-repeat

; 배경 이미지의 반복을 설정.

background-position

; 배경 이미지의 위치를 설정.

background-attachment

; 요소가 스크롤될 때 배경 이미지의 스크롤 여부(특성) 설정.

scroll : 배경 이미지가 요소를 따라서 같이 스크롤 됨.

fixed : 배경 이미지가 뷰포트(Viewport)에 고정되어, 요소와 같이 스크롤되지 않음.

local : 요소 내 스크롤 시 배경 이미지가 같이 스크롤 됨.

background-size

; 배경 이미지의 크기를 지정.

auto : 배경 이미지가 원래의 크기로 표시됨. (기본값)

단위 : px, em, % 등 단위로 지정. width, height 입력 가능. width 만 입력하면 비율에 맞게 지정됨.

cover : 배경 이미지의 크기 비율을 유지하며, 요소의 영역을 모두 덮도록 이미지가 맞춰짐.. 이미지가 잘릴 수 있음.

contain : 배경 이미지의 크기 비율을 유지하며, 요소의 영역에 이미지 전체가 완전히 보이도록 맞춰짐. 이미지가 잘리지 않음.