CSS에서 배경색을 사용하는 방법에 대하여 알아봅니다. 이 경우 CSS 프로퍼티인 background-color를 사용할 수 있습니다. background-color는 해당 엘리먼트에 배경색을 지정하여 보여줍니다. 사용방법은 아래와 같습니다.

background-color { color | transparent | inherit | initial }



@ background-color property
- CSS 1




# background-color 프로퍼티 값 지정하기
설정 가능한 값으로 투명하게하는 transparent를 사용할 수 있습니다. color값으로는 HEX, RGB, RGBA, HSL, HSLA가 사용됩니다.
div { background-color: #f00; }
div { background-color: ref; }
div { background-color: rgb(200, 0, 0);
div { background-color: hsl(50, 30%, 60%);
div { background-color: hsla(70, 20%, 80%);

아래는 간단한 예제코드입니다. 어떻게 나타나는지 확인해보세요.
.black-bg { background-color: black }
.red-bg { background-color: red }
.blue-bg { background-color: blue }

@ bgcolor.html 
<div class="black-bg"></div>
<div class="red-bg"></div>
<div class="blue-bg"></div>

위 코드를 실행하면 아래처럼 나타나게됩니다. 예제를 위하여 div 태그에 아래 스타일을 추가하였습니다.
.black-bg,
.red-bg,
.blue-bg {
  width: 200px;
  height: 200px;
  border: 1px solid #000;
}