background

background-color

백그라운드 색상을 설정합니다.

• background-color : #fff; - 백그라운드 색을 설정합니다.
• background-color : transparent; - 백그라운드 색을 투명하게 설정합니다.

background-image

백그라운드 이미지를 설정합니다.

• background-image : none; - 백그라운드 이미지 속성을 설정하지 않습니다.
• background-image : url(이미지경로); - 백그라운드 이미지를 설정합니다.

background-position

백그라운드 위치를 설정합니다.

• background-position : left top
• background-position : left center
• background-position : left bottom
• background-position : right top
• background-position : right center
• background-position : right bottom
• background-position : center top
• background-position : center center
• background-position : center bottom
• background-position : 10px 20px
• background-position : 10% 5%
• background-position : 10% 5% , 10px 40px, center top

background-repeat

백그라운드 이미지 반복 여부를 설정합니다.

• background-repeat : repeat(기본); - 이미지를 X축 Y축으로 반복 설정합니다.
• background-repeat : repeat-x; - 이미지를 X축으로 반복 설정합니다.
• background-repeat : repeat-y; - 이미지를 Y축으로 반복 설정합니다.
• background-repeat : no-repeat; - 이미지를 반복하지 않고 하나만 나오게 합니다.

background-size

백그라운드 이미지 사이즈를 설정합니다.

• background-size : 30px 40px; - length
• background-size : 100% 50%; - 퍼센트
• background-size : auto(기본값);
• background-size : contain; - 이미지를 요소의 크기에 맞게 설정합니다. 가로와 세로 비율을 유지되면서 설정
• background-size : cover; - 이미지를 요소 크기에 맞게 설정합니다. 화면 크기에 맞게 공백없이 설정

background-attachment

백그라운드 이미지 고정여부를 설정합니다.

• background-attachment : scroll(기본값);
• background-attachment : fixed; - 배경이미지를 고정하고, 콘텐츠(글씨)만 움직입니다.
• background-attachment : local; - 배경이미지와 콘텐츠가 같이 움직입니다.

image 출처 :https://cdn.dribbble.com/users/103909/screenshots/3025060/onplane-04.png