background

background-clip

1. 배경 이미지나 배경색상이 적용되는 영역을 지정하는 속성
2. 속성이 적용되는 부분은 콘텐츠 영역, padding영역, 테두리(border)영역이 있다.

border-box: 테두리까지 효과가 적용된다.
padding-box: 테두리를 뺀 패딩 범위까지 효과가 적용된다.
content-box: 내용 부분에만 효과가 적용된다.

---

background-origin

1. 배경 이미지의 시작점을 지정하는 속성.
2. background-clip과 마찬가지로 콘텐츠 영역, padding영역, 테두리(border)영역으로 구분하여 배경 이미지가 시작되는 지점을 지정할 수 있다.

 

border-box: 테두리를 기준으로 적용된다.
padding-box: 테두리를 뺀  패딩을 기준으로 적용된다.
content-box: 내용 부분을 기준으로 적용된다.

 

---

 

background-attachment

 

1. 배경 이미지를 항상 같은 자리에 고정시킬 때 사용한다. 
2. 속성에는 scroll과 fixed가 있고 기본값은 scroll이다.
  

scroll: 콘텐츠가 스크롤되면 배경도 따라서 스크롤 된다. 
fixed: 배경은 고정되고 콘텐츠 내용만 스크롤 된다.