background-size

background-size

---

background-size : 가로축크기 세로축크기;

• px단위 값: 배경이미지의 크기를 절대값으로 설정

• %단위 값: 자신이 표시될 박스 크기에 기준하여 백분율로 설정

• cover: 가로우선

• contain:세로우선

background 속성의 중첩사용

---

• 콤마(,)로 구분하여 여러 겹의 배경을 지정할 수 있음.

• 마지막에 명시된 항목이 가장 뒤에 배치된다.

background: url(img/btn_a.png) right 0 repeat-y

url(img/menu.png) no-repeat,

url(img/menu_bg.png) repeat-x;

그라디언트 색상 처리

---

webkit 계열 브라우저의 경우

/* -webkit-gradient:(유형, 시작위치 끝위치, 시작색상, 종료색상); */

background: -webkit-gradient(linear, left bottom, right top, from(#06f), to(#fff));

mozila 계열 브라우저의 경우

/* -moz -유형 -gradient:(시작위치 [각도], 시작생상, 종료색상); */

background: -moz-linear-gradient(bottom 45deg, #06f, #fff);