[CSS] background 배경

배경관련 기본 속성 (background)

---

속성	설명
background-color	배경색상 지정
background-image	배경이미지  url("파일경로");  외부 css파일에서 명시할 경우 파일 경로는 html기준이 아닌 css 파일 기준이 된다.
background-repeat	배경이미지 반복 설정  repeat, repeat-x, repeat-y, no-repeat
background-attachment	스크롤에 따른 배경 이미지 처리  scroll, fixed
background-position	배경이미지 위치.  left, right, top, bottom, center, px값
background	위의 다섯가지 속성을 공백으로 구분하여 일괄 명시. 불필요한 요소는 생략 가능

배경관련 속성 활용

 - 이미지에 텍스트가 포함된 경우

* 원본 텍스트를 HTML안에 명시

* 이미지는 그안에 배경으로 설정

* 원본 텍스트를 text-indent 속성으로 화면에서 멀리떨어지게 설정.

 - 이미지 클립핑

* 아이콘, 버튼 등의 이미지를 하나의 이미지 파일에 모두 모아 놓기.

* 표시할 항목의 크기와 동일한 박스를 준비. 그 안에 배경이미지로 설정

* background-position 속성으로 이미지를 표시하고자 하는 위치까지 이동

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);

=> 크롬 브라우저 확장기능 사용! (Generate Some CSS3)