CSS / Reference / background-color

background-color는 요소의 배경색을 지정합니다. 기본적으로 내용·padding·테두리 아래 영역을 칠하지만 margin은 칠하지 않으며, 실제 칠하기 범위는 background-clip에 따라 달라집니다.

문법과 주요 값

.card { background-color: #e6f2ff; }
.overlay { background-color: rgb(0 0 0 / 40%); }

값의 적용 범위와 문법은 MDN의 background-color 문서에서 확인할 수 있습니다.

실행 예제와 결과 비교

아래 전체 코드를 UTF-8 형식의 background-color-example.html 파일로 저장한 뒤 브라우저로 여세요. 예제용 CSS는 이 파일 안에만 넣고 사이트 전체 스타일시트에 그대로 붙여 넣지 않습니다.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>background-color 비교 예제</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.samples { background: #ffd166; padding: 20px; }
.target, .reference { width: 220px; padding: 18px; border: 6px dashed #333; margin: 10px; }
.target { background-color: rgb(0 108 156 / 40%); }
.reference { background-color: transparent; }
</style>
</head>
<body>
<main id="demo">
<h1>background-color 적용 비교</h1>
<section class="samples"><div class="a"><p class="label">배경색 알파 40%</p><div class="target">CSS 속성의 적용 결과를 비교합니다. 이 문장은 줄바꿈과 표시 영역을 확인하는 예시입니다.</div></div><div class="b"><p class="label">transparent</p><div class="reference">CSS 속성의 적용 결과를 비교합니다. 이 문장은 줄바꿈과 표시 영역을 확인하는 예시입니다.</div></div></section>
</main>
</body>
</html>

반투명 배경색은 뒤의 노란 배경과 합성되지만 글자 자체는 함께 투명해지지 않습니다. margin 부분은 부모 배경이 보입니다.

배경색과 상속 구분

배경색은 보통 자동 상속되지 않습니다. 자식의 배경이 투명해 부모의 배경이 비쳐 보이는 것과 부모 값을 상속하는 것은 다릅니다. inherit를 쓰면 부모의 계산된 색을 자식의 새 배경색으로 지정합니다.

배경 이미지와 읽기 대비

background-color는 배경 이미지 레이어 아래에 칠해집니다. 이미지가 로딩되지 않아도 글자를 읽을 수 있도록 대체 색을 정하고, 사진 위의 텍스트에는 밝은 부분과 어두운 부분 모두에서 대비를 확인하세요. background 단축 속성을 뒤에 쓰면 이전 색이 재설정될 수 있습니다.

적용되지 않거나 예상과 다를 때

• 색이 안 보이면 위의 배경 이미지나 다른 요소가 가리고 있는지 확인합니다.
• 반투명 효과에 opacity를 썼다면 글자까지 흐려지는지 확인하고 배경색의 알파 값과 비교합니다.

관련 설정을 함께 조정할 때는 요소 전체의 투명도인 opacity, 배경 칠하기 범위인 background-clip을 참고하세요.