2. 색(Colors)과 배경(Backgrounds)

〈color〉 속성은 요소의 텍스트 색을 나타낸다.:

span { color: red }
span { color: rgb(255,0,0) }

2.1. 배경(Backgrounds)

개발자는 배경으로 이미지 또는 색을 지정할 수 있다. 배경은 content, padding, border 영역까지 나타낸다. 상속되지 않으며 다른 투명한 배경을 갖는 요소를 비출 수 있다.

문서의 배경을 HTML 요소대신 BODY 요소에 지정하는 것이 권장된다. 캔버스의 배경을 그릴때 HTML 요소의 스타일이 BACKGROUND-COLOR: TRANSPARENT 이면서 BACKGROUND-IMAGE: NONE일 경우 유저 에이전트는 BODY의 속성을 사용해야 한다.

예시:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
  <TITLE>Setting the canvas background</TITLE>
  <STYLE type="text/css">
     BODY { background: url("http://example.com/marble.png") }
  </STYLE>
  <P>My background is marble.

위 예시에서 BODY가 태그가 없더라도 HTML Parser는 BODY 태그를 추론 및 추가하며 배경 스타일을 적용한다.

  • background-color: <color> | transparent(초기값)
  • background-image: <uri> | none(초기값)

background-image를 사용할 수 없을 때 background-color가 적용된다.

예시:

h1 { background-color: #F00 }
body { background-image: url("marble.png") }
p { background-image: none }
  • background-repeat: repeat(초기값) | repeat-x | repeat-y | no-repeat
  • background-attachment: scroll(초기값) | fixed

fixed를 할 경우 배경이 뷰포트에 고정된다. 페이지 미디어에서는 페이지 박스에 고정된다.

2.1.1. background-position

이미지가 배경일 경우 이 속성으로 초기 위치를 결정한다. 값이 하나만 주어졌을 경우에는 두번째 값은 center로 가정된다.

  • 값이 키워드일 경우 파서가 추론하여 수직, 수평 키워드를 찾는다. 즉 2개의 값이 수직만 오거나 수평만 올 수는 없다.
  • 값이 키워드가 아닐 경우, 수평, 수직 순서로 값이 사용된다.

올 수 있는 값의 종류는 다음과 같다.

  • <percent>: 패딩박스안에서 이미지를 이동시킨다.
  • <length>:
  • top | left | bottom | right | center: 수직 0%, 수평0%, 수직 100%, 수평 100%, 수직 또는 수평 50%

CSS 2.1에서 인라인 요소의 배경에 대한 위치 지정은 정의되지 않았다.