background-color

CSS Reference

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

문법과 주요 값

속성	초기값	상속	주요 적용 조건
`background-color`	transparent	아니요	모든 요소; 실제 그림·텍스트·상자의 존재 조건은 본문에서 확인

초기값은 브라우저 기본 스타일시트가 HTML 요소에 적용한 값과 같다는 뜻이 아닙니다. 실제 값은 개발자 도구의 Computed에서 확인하세요.

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

값 또는 구분	동작과 선택 기준
`transparent`	배경색이 투명해 뒤의 배경이 보임
`#e6f2ff`	16진수 색
`rgb(0 0 0 / 40%)`	알파 값으로 배경색만 반투명하게 지정
`inherit`	부모의 계산된 배경색을 명시적으로 상속

값과 적용 조건은 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; }

/* 좁은 화면에서 실습 외곽을 맞춥니다. */
.target, .reference { max-width: calc(100vw - 48px - 108px); }
</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 단축 속성을 뒤에 쓰면 이전 색이 재설정될 수 있습니다.

한 가지 설정씩 바꾸어 확인하기

앞의 전체 코드를 저장한 예제 파일을 사용합니다. 지정한 선택자의 CSS만 변경하고, 서로 다른 비교 조건을 한꺼번에 바꾸지 않습니다.

기존 .target의 배경색 알파만 40%에서 100%로 바꾸어 뒤 배경과 합성되는지 비교합니다. 글자 opacity는 바꾸지 않고 원래 알파로 복구합니다.
읽기 대비는 최종 배경과 글자색의 조합에서 검사합니다. 일반 텍스트 최소 4.5:1, 큰 텍스트 3:1 기준과 예외를 구분하고 대비 검사 도구의 입력값에 알파 합성까지 반영합니다.

배경 이미지를 함께 쓴 실제 구성에서는 읽을 수 있는 불투명 background-color도 남기세요. 개발자 도구에서 background-image를 잠시 해제하고 같은 글자색이 대체 배경 위에서도 읽히는지 확인한 뒤 복구합니다. WCAG의 큰 텍스트는 일반적으로 18pt(24 CSS px) 이상 또는 굵은 14pt(약 18.67 CSS px) 이상이며 로고·비활성 컨트롤 등에는 별도 예외가 있습니다.

관련 조건은 WCAG 텍스트 대비 기준에서 확인할 수 있습니다.

여러 배경 속성을 한 화면에서 조합하려면 배경색과 배경 이미지 설정하기를 참고하세요. 본문의 조건과 함께 비교할 관련 속성은 opacity, background-clip입니다.