---
id: css-background-color
title: "CSS Background Color"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["background-color", "opacity", "transparency", "background opacity", "CSS background color", "rgba background"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.89
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["css", "web", "frontend", "w3schools", "background", "color", "opacity"]
raw_sources: ["https://www.w3schools.com/css/css_background.asp"]
applied_in: []
github_commit: ""
---

# [[CSS Background Color]]

## 🎯 한 줄 통찰 (One-line insight)
The `background-color` property sets the background color of an element; transparency can be added with `opacity` (which child elements inherit) or, to avoid that inheritance, with an `rgba()` background. [S1]

## 🧠 핵심 개념 (Core concepts)
- **background-color** — specifies the background color of an element, given as a valid color name, HEX value, or RGB value. [S1]
- **opacity property** — specifies the opacity/transparency of an element, with values from 0.0 to 1.0; the lower the value, the more transparent. [S1]
- **Inheritance caveat** — when using the `opacity` property to add transparency to the background of an element, all of its child elements inherit the same transparency, which can make text inside hard to read. [S1]
- **RGBA alternative** — adding transparency via an `rgba()` color applies opacity only to the background color, not to the element's child elements. [S1]

## 🧩 추출된 패턴 (Extracted patterns)
- **Per-element backgrounds** — apply `background-color` independently to `body`, headings, paragraphs, and divs. [S1]
- **Transparent background without faded text** — prefer an `rgba()` background color over the `opacity` property when text inside the element must stay fully readable. [S1]

## 📖 세부 내용 (Details)
**Background Color**
The `background-color` property specifies the background color of an element. [S1]
```css
body {
  background-color: lightblue;
}
```

The background color can be set for any HTML element: [S1]
```css
h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
}
```

**Opacity / Transparency**
The `opacity` property specifies the opacity/transparency of an element. It can take a value from 0.0 - 1.0. The lower the value, the more transparent: [S1]
```css
div {
  background-color: green;
  opacity: 0.3;
}
```

> Note: When using the `opacity` property to add transparency to the background of an element, all of its child elements inherit the same transparency. This can make the text inside a fully transparent element hard to read. [S1]

**Transparency using RGBA**
To avoid the inherited-transparency problem, an `rgba()` color value can be used, which sets the opacity only for the background color and not the rest of the element. RGBA color values are an extension of RGB with an alpha channel, `rgba(red, green, blue, alpha)`, where alpha ranges from 0.0 (fully transparent) to 1.0 (fully opaque): [S1]
```css
div {
  background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}
```

## 🛠️ 적용 사례 (Applied in summary)
The CSS rules above are the page's own demonstration examples for `body`, `h1`, `div`, and `p`. No external project/commit applications found in the source.

## 💻 코드 패턴 (Code patterns)
Solid background color (language: CSS):
```css
selector {
  background-color: lightblue;
}
```
Transparent background that does not fade child text:
```css
selector {
  background: rgba(0, 128, 0, 0.3); /* alpha 0.0–1.0 */
}
```

## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **`opacity` vs `rgba()` background** — `opacity` makes the entire element (including child elements and their text) transparent; an `rgba()` background color makes only the background transparent, keeping child content fully opaque. Use `rgba()` when the text must stay readable. [S1]

## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source.

## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.89
- **중복 검사 결과:** 신규 생성 (New discovery)

## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Background Image]], [[CSS Background Shorthand]], [[CSS RGB]], [[CSS Colors]]
- **참조 맥락:** Referenced whenever an element needs a solid or partially transparent background fill.

## 📚 출처 (Sources)
- [S1] W3Schools — CSS Background Color — https://www.w3schools.com/css/css_background.asp

## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Background Color" page (Astra wiki-curation, P-Reinforce v3.1 format).
