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로 처리한다.

▲▶