css3 background 추가속성

-o-background-size : contain;

-moz-background-size : contain;

-webkit-background-size : contain;

background-size : contain;

10px 20px : 가로 10px, 세로 20px

25% 30% : 가로 25%, 세로 30%

cover : 이미지 크기 비율을 그대로 유지한 상태에서 이미지가 들어 있는 엘리먼트의 너비 또는 높이에 이미지를 맞춘다.

contain : 이미지 크기 비율을 그대로 유지한 상태에서 원하는 영역에 전체 이미지가 들어가도록 가장 작은 크기로 이미지 스케일을 조정한다.

---

-o-background-clip : padding-box;

-moz-background-clip : padding;

-webkit-background-clip : padding-box;

background-clip : padding-box;

border/border-box : 보더의 바깥쪽 모서리까지 이미지를 잘라낸다.

padding/padding-box : 패딩의 마깥쪽 모서리 까지 이미지를 잘라낸다.

content/content-box : 콘텐츠의 바깥쪽 모서리까지 이미지를 잘라낸다.

---

-o-background-origin : padding-box;

-moz-background-origin : padding-box;

-webkit-background-origin : padding-box;

background-origin : padding-box;

border/border-box : 바깥 모서리 보더를 기준으로 이미지를 위치시켜 이미지가 보더 뒤로 가게한다.

padding/padding-box : 패딩의 안쪽 모서리를 기준으로 이미지를 위치시킨다.

content/content-box : 콘텐츠의 바깥 모서리를 기준으로 이미지를 위치시킨다.
 

---

multi-background

background:url(a.gif) no-repeat center top, #fff url(b.gif) repeat-x 0 0;



어...어려워...ㅠㅠ