[CSS] Background 속성

# background 속성

background: url("이미지파일") 배경 이미지를 지정하는 함수

background-image; url() 함수를 사용하여 이미지 지정

background-repeat; 반복 실행 설정, repeat(기본값), no-repeat

background-position; 이미지를 반복하지 않을 때 위치 설정,

top(기본값)/center/bottom, left(기본값)/center/right

 

# background-size 속성

- 해당 요소의 너비와 높이의 값에 이미지를 표현하는 속성

background-auto; 기본값, 해당 요소 안에 이미지를 그대로 표현

background-contain; 해당 요소 안에 이미지를 확대/축소하여 이미지 전체를 표현

background-cover; 해당 요소를 모두 덮을 수 있도록 이미지를 확대/축소한다.

 

# background-clip 속성

- 박스의 포함 영역을 설정하는 속성

background-clip: border-box; 박스 모델 안에 테두리까지 모두 포함 (기본값)

background-clip: padding-box; 박스 모델 안에 패딩까지 포함(테두리 제외)

background-clip: content-box; 박스 모델 안에 내용까지 포함(테두리와 패딩 제외)

 

# background-origin 속성

- 해당 요소에서 이미지가 위치하는 기준 설정

background-origin: padding-box; 박스 모델 안에 테두리를 제외한 패딩이 기준

background-origin: border-box; 박스 모델 안에 테두리가 기준

background-origin: content-box; 박스 모델 안에

 

# background-attachment 속성

- 해당 요소에서 이미지의 고정 위치 지정

background-attachment: scroll; 페이지를 스크롤할 때 이미지도 같이 스크롤 됨(기본값)

background-attachment: fiexd; 페이지를 스크롤 하더라도 이미지는 정해진 위치에 고정