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 속성의 값을 쓴다.
모든 element에 적용할 수 있고, 유전되지 않는다.
초기값은 transparent이다.
<HTML>
<HEAD>
<STYLE type="text/css">
H1 { background-color: #F00 }
</STYLE>
<BODY bgcolor=#ffb500>
<H1>FF0000에 해당하는 색</H1>
<BODY bgcolor=#ffb500>
</HTML> 이렇게 나와요
URL의 값으로 나오는 이미지를 element의 배경으로 지정할 수 있다.
모든 element에 적용할 수 있고, 유전되지 않는다.
초기값은 none이다.
그림 파일을 불러오지 못할 경우에 대비해 비슷한 색조의 배경색을 함께 지정하는 것이 좋다. 그림이 나오게 되면 배경색 윗쪽에 덮이게
된다.
<HTML>
<HEAD>
<STYLE type="text/css">
BODY { background-image: none }
P { background-image: url(back-grey1.gif) }
</STYLE>
<BODY bgcolor=#ffb500>
이 곳에는 배경이 나오지 않습니다.<BR>
<P>이 곳에는 배경이 나와야 겠지요. <BR>
나와야 정상인데 나오지 않는다구요?<BR>
그렇다면 브라우저를 탓해야지요. 다음에는 되겠거니...하면서요.<BR>
익스플로러 4.0에서는 잘 나오는데요.
</P>
확실히 하기위해 /P를 해 주었지요.
<BODY bgcolor=#ffb500>
</HTML> 이렇게 나와요
예에서 볼 수 있듯이, 배경으로 쓰이는 그림은 그림이 나타나야 하는 영역보다 크기가 작을 경우에, 바둑판식으로 영역을 꽉 채우게
된다.
background-repeat : repeat | repeat-x | repeat-y | no-repeat
모든 element에 적용할 수 있고, 유전되지 않는다.
초기값은 repeat이다.
배경으로 사용하는 그림은 기본적으로 바둑판식, 즉, X, Y 방향 모두 연속되게 출력된다. Background-repeat 속성을
사용하면 사용자가 원하는 방향으로 연속시키거나 연속되지 않도록 할 수 있다.
- repeat : 가로, 세로 모두 연속된다.
- repeat-x : 가로 방향으로만 연속된다.
- repeat-y : 세로 방향으로만 연속된다.
- no-repeat : 그림 한 개만 나온다.
<HTML>
<HEAD>
<STYLE type="text/css">
BODY { background-color : #fcf ;
background-image : url(cherry.gif);
background-repeat: repeat-y; }
</STYLE>
<BODY bgcolor=#ffb500>
본문 전체가 체리로 덮입니다. 세로 방향으로만 연속되구요.
그런데, 배경색을 분홍색으로 주었으니
투명한 배경을 가진 체리 그림의 빈 곳마다 분홍색도 함께 보이겠지요.
<BODY bgcolor=#ffb500>
</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 bgcolor=#ffb500>
화면의 정 중앙에서 시작해 아랫쪽으로만 체리가 연속되어야 정상이다.
<BODY bgcolor=#ffb500>
</HTML> 이렇게 나와요
모든 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 bgcolor=#ffb500> <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 bgcolor=#ffb500> </HTML> 이렇게 나와요
위 예에서 보듯이, 익스플로러 4.0은 아직 background-attachment의 값인 fixed와 scroll을 구분하지 못하고,
모두 scroll로 처리한다.