스타일 속성 - background

 
■ background-color (배경색)

 배경색을 지정하는 방법은 세가지가 있으며, 색이름, RGB(Red, Green, Blue) 값을 (0~255) 범위 내에서 표기한다. 또한, 16진수 표기법은 #기호를 앞에 넣고 16진수(0~F) 6자리 값으로 지정할 수 있다.

 

background-color:yellow;

background-color:#00ff00;

background-color:rgb(255,0,255); 

 

 

■ background-image (배경이미지)

 

 배경이미지는 배경색 위에 배경이미지가 표시되며 다시 그 위에 내용이 표시된다. 따라서 배경이미지 중 투명 처리된 부분은 배경색이 그대로 투과된다. 배경 이미지를 지정하는 경우 이미지를 사용할 수 없는 환경을 고려해서 배경색도 지정하는 것이 좋다.

 

background-image:url('sample.jpg');

 

 이 때 배경이미지는 왼쪽부터 오른쪽으로 반복되어 표시된다.

 

 

■ background-repeat (배경이미지 반복)

 배경 이미지의 반복을 vertically(y축), horizontally(x축), xy축 모두, 반복을 안하게 할 수 있다.

 

background-repeat:repeat;    // x,y축 모두 반복

background-repeat:repeat-x;    // x축

background-repeat:repeat-x;    // y축

background-repeat:no-repeat;    // 반복없음

 

 

■ background-attachment (배경 이미지 고정 속성)

 

 배경을 스크롤에 영향을 받게 할 수도 있고 고정시킬수도 있다. 이 특징은 textarea 에 사용되면 대부분의 브라우저에서 동작하지 않는다. 하지만 Internet Explorer6.0 버전을 올바르게 표현된다.

 

background-image: url('sample.jpg');

background-attachment: fixed;

 

 

■ background-image (배경이미지 출력위치)

 

 HTML 문서에서 배경 이미지가 어디에 나올 것인지 정확하게 정의하고 싶다면 background-position을 사용한다. position을 정의하는 세가지 방법은 length(길이), percentages(퍼센티지), keywords(키워드)가 있지만 추천하는 방법은 length(길이)을 이용한 방법이다. 특히, pixels(픽셀즈)를 사용하는 방법을 추천한다.

 

background-position: 20px 10px;

background-position: 30% 30%;

background-position: top center; 

 

 픽셀를 이용할 때는 왼쪽, 탑의 위치를 지정한다. 왼쪽과 탑의 위치를 지정할 때는 정수형을 사용해야 한다. 퍼센트도 픽셀과 같은 방법으로 지정하며, 키워드를 사용할 때는 top, right, bottom, left, center 값을 가질 수 있다.

 

 

■ 배경에 관련된 스타일 속성

 

참고) http://www.w3schools.com/css/css_background.asp