Background 속성
◀ ▶
Element의 배경색이나 무늬를 지정할 수 있다.
배경이란, Box model에서 content의 배경이 되는 부분과 padding을 포함한 부분을 말한다. Border 부분의 색과 모양은 border 속성으로 지정할 수 있다. Margin 부분은 언제나 투명하기 때문에 부모 element의 배경이 비쳐 보이게 된다.
배경에 관계된 속성은 모두 유전되지 않는다. 그러나, background-color 속성의 기본 초기값이 transparent(투명)이기때문에 특별히 이 속성을 사용하지 않았을 때는 부모 element의 배경색이나 무늬가 자식 element에도 똑같이 나타나 유전된 것처럼 보일 수 있다.

기호 설명 

A | B : A 또는 B 중의 하나이다.
A || B : A 또는 B 중의 하나, 또는 둘 다이다.
[  ] : 일반적인 괄호의 의미이다.
A{1,2} : A가 최소한 1번에서 최대한 2번까지 들어갈 수 있다.
 : A 속성의 값을 쓴다.
background-color : 색이름 | RGB값 | transparent

모든 element에 적용할 수 있고, 유전되지 않는다.
초기값은 transparent이다.
<HTML>
<HEAD>
<STYLE type="text/css">
H1 { background-color: #F00 } 
</STYLE>
<BODY>
<H1>FF0000에 해당하는 색</H1>
<BODY>
</HTML> 이렇게 나와요
background-image : url | none

URL의 값으로 나오는 이미지를 element의 배경으로 지정할 수 있다.
모든 element에 적용할 수 있고, 유전되지 않는다.
초기값은 none이다.
그림 파일을 불러오지 못할 경우에 대비해 비슷한 색조의 배경색을 함께 지정하는 것이 좋다. 그림이 나오게 되면 배경색 윗쪽에 덮이게 된다.
<HTML>
<HEAD>
<STYLE type="text/css">
BODY { background-image: none }  
P { background-image: url(back-grey1.gif) } 
</STYLE>
<BODY>
이 곳에는 배경이 나오지 않습니다.<BR>
<P>이 곳에는 배경이 나와야 겠지요. <BR>
나와야 정상인데 나오지 않는다구요?<BR>
그렇다면 브라우저를 탓해야지요. 다음에는 되겠거니...하면서요.<BR>
익스플로러 4.0에서는 잘 나오는데요.
</P>
확실히 하기위해 /P를 해 주었지요.
<BODY>
</HTML> 이렇게 나와요
예에서 볼 수 있듯이, 배경으로 쓰이는 그림은 그림이 나타나야 하는 영역보다 크기가 작을 경우에, 바둑판식으로 영역을 꽉 채우게 된다.

background-repeat : repeat | repeat-x | repeat-y | no-repeat

모든 element에 적용할 수 있고, 유전되지 않는다.
초기값은 repeat이다.
배경으로 사용하는 그림은 기본적으로 바둑판식, 즉, X, Y 방향 모두 연속되게 출력된다. Background-repeat 속성을 사용하면 사용자가 원하는 방향으로 연속시키거나 연속되지 않도록 할 수 있다. 
<HTML>
<HEAD>
<STYLE type="text/css">
BODY { background-color : #fcf ; 
background-image : url(cherry.gif); 
background-repeat: repeat-y;  } 
</STYLE>
<BODY>
본문 전체가 체리로 덮입니다. 세로 방향으로만 연속되구요. 
그런데, 배경색을 분홍색으로 주었으니
투명한 배경을 가진 체리 그림의 빈 곳마다 분홍색도 함께 보이겠지요.
<BODY>
</HTML> 이렇게 나와요
위의 예를 보면, 배경 그림을 한 방향으로만 연속시키거나 연속시키지 않을 때(none으로 줄 때)는 시작 위치가 브라우저의 왼쪽 위라는 것을 알 수 있다.

background-attachment : scroll | fixed

배경 그림으로 사용한 그림의 위치가, 적용된 element와 함께 움직이는지, 브라우저의 화면에 고정되는지를 정한다.
모든 element에 적용할 수 있고, 유전되지 않는다.
초기값은 scroll이다. 다음에 나오는 background-position과 함께 보자.

background-position : [퍼센트값 | 길이 ]{1,2} | [top | center | bottom] || [left | center | right]

배경 그림이 들어갔을 때, 그 시작점을 어디로 할 것인지를 정한다.
Block-level element에 적용할 수 있고, 유전되지 않는다.
초기값은 0%, 0%이다.
퍼센트 값을 썼을 때, background-attachment의 값이 scroll이면, 이 속성이 사용된 element의 content box(Box dimensions 참고)를 기준으로 한다(padding, border, margin을 포함한 상자가 아니다). Background-attachment의 값이 fixed이면, 전체 화면의 크기를 기준으로 한다.
<HTML>
<HEAD>
<STYLE type="text/css">
BODY { background-color : #fcf ; 
background-image : url(cherry.gif); 
background-repeat: repeat-y;
background-attachment : fixed;
background-position : 50% 50%  } 
</STYLE>
<BODY>
화면의 정 중앙에서 시작해 아랫쪽으로만 체리가 연속되어야 정상이다.
<BODY>
</HTML> 이렇게 나와요
background : <'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>

모든 element에 적용할 수 있고, 유전되지 않는다.
대표속성에는 초기값이 없다.
<HTML>
<HEAD>
<STYLE type="text/css">
P { background: #fcf url(cherry.gif) 0% no-repeat fixed } 
P.scroll { background: #fcf url(cherry.gif) 50% no-repeat scroll }
</STYLE>
<BODY>
<P>P의 content box에 해당하는 부분에만 분홍색 배경이 나타난다.
cherry.gif 그림은 background-attachment가 fixed이므로
화면의 0%, 0%, 즉 왼쪽 위에 나타나고,
background-repeat가 no-repeat이므로 한 개만 나온다.
그래야 정상이다.
</P>
<P class=scroll>이 곳은 다 동일하지만 background-attachment가 scroll이므로
P의 content box 중 50%, 50% 지점에 체리가 한 개 나온다. 
</P>

<BODY>
</HTML> 이렇게 나와요
위 예에서 보듯이, 익스플로러 4.0은 아직 background-attachment의 값인 fixed와 scroll을 구분하지 못하고, 모두 scroll로 처리한다.
◀ ▶