Files

T

koriweb 9609c04755 docs(10_Wiki): W3Schools 위키화 — HTML/CSS/JavaScript(core)

W3Schools 튜토리얼을 P-Reinforce v3.1 포맷으로 위키화(영어 본문, 한/영 섹션 헤더).
- Topic_HTML: 59문서 (튜토리얼+예제, 레퍼런스/메타 제외)
- Topic_CSS: 190문서 (메인 + Advanced/Flexbox/Grid/RWD 전체)
- Topic_JavaScript: 120문서 (코어 언어; Temporal/DOM상세/BOM/WebAPI/AJAX/jQuery/Graphics 등은 후속)
각 폴더 00_INDEX.md(MOC) 포함. 코드 verbatim, 미확인분은 "Not found in source" 표기.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

2026-06-23 19:21:18 +09:00

7.2 KiB

Raw Blame History

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit

title

CSS Background Size

🎯 한 줄 통찰 (One-line insight)

The background-size property specifies the size of background images using lengths, percentages, or the keywords auto, contain, or cover — enabling everything from fixed-pixel images to full-window cover backgrounds. [S1]

🧠 핵심 개념 (Core concepts)

background-size — specifies the size of background images. [S1]
Value types — the size can be specified in lengths, percentages, or by using one of the keywords auto, contain, or cover. [S1]
auto — the default value; displays the background image in its original size. [S1]
contain — scales the image up or down to fit inside the content area. [S1]
cover — scales the image to be as large as possible so the content area is completely covered. [S1]
Multiple values — accepts a comma-separated list of sizes when working with multiple backgrounds. [S1]

🧩 추출된 패턴 (Extracted patterns)

Keyword-scaling pattern — contain fits the whole image inside the box; cover fills the box and may crop overflow. [S1]
Full-window background pattern — apply the background to <html> with cover so the image always fills at least the browser window. [S1]
Hero-image pattern — apply a centered cover background to a fixed-height <div> with position: relative to place text over a large image. [S1]

📖 세부 내용 (Details)

CSS background-size The background-size property allows you to specify the size of background images. The background size can be specified in lengths, percentages, or by using one of the keywords: auto, contain, or cover. [S1]

Example — background size with pixels: [S1]

#div1 {
  background-image: url(img_flower.jpg);
  background-position: right top;
  background-repeat: no-repeat;
  background-size: 100px 80px;
}

Keyword values The keyword values for background-size are auto, contain, and cover. The auto value is the default value, and displays the background image in its original size. The contain value scales the image up or down to fit inside the content area. The cover value scales the image to be as large as possible so that the content area is completely covered by the background image. [S1]

Example — contain, cover, and auto: [S1]

#div1 {
  border: 1px solid black;
  background-image: url(img_flwr.gif);
  background-repeat: no-repeat;
  background-size: contain;
}

#div2 {
  border: 1px solid black;
  background-image: url(img_flwr.gif);
  background-repeat: no-repeat;
  background-size: cover;
}

#div3 {
  border: 1px solid black;
  background-image: url(img_flwr.gif);
  background-repeat: no-repeat;
  background-size: auto;
}

Define sizes of multiple background images The background-size property also accepts multiple values (using a comma-separated list) when working with multiple backgrounds. [S1]

#div1 {
  background-image: url(img_tree.gif), url(img_flwr.gif), url(paper.gif);
  background-position: left top, right bottom, left top;
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: contain, 150px, auto;
}

Full size background image The goal is a background image that covers the entire browser window at all times. The requirements are: fill the entire page with the image (no white space), scale the image as needed, center the image on the page, and do not cause scrollbars. Here, the styles are defined on the <html> element (the <html> element is always at least the height of the browser window). [S1]

html {
  background: url(img_man.jpg) no-repeat center fixed;
  background-size: cover;
}

Hero image You could also use different background properties on a <div> to create a hero image (a large image with text), and place it where you want. [S1]

.hero-image {
  background: url(img_man.jpg) no-repeat center;
  background-size: cover;
  height: 500px;
  position: relative;
}

CSS Background Properties

Property	Description
`background`	A shorthand property for setting all the background properties in one declaration
`background-clip`	Specifies the painting area of the background
`background-image`	Specifies one or more background images for an element
`background-origin`	Specifies where the background image(s) is/are positioned
`background-size`	Specifies the size of the background image(s)

[S1]

⚖️ 비교 및 선택 기준 (Comparison & decision criteria)

Choosing among the size keywords: [S1]

auto — keep the image at its original size (default); use when intrinsic dimensions are what you want.
contain — guarantees the entire image is visible inside the box, possibly leaving uncovered space.
cover — guarantees the box is fully covered, possibly cropping the image edges; the standard choice for full-window and hero backgrounds.

🛠️ 적용 사례 (Applied in summary)

The page's examples are the applied cases: fixed-pixel sizing, the contain/cover/auto comparison, per-image sizes for multiple backgrounds, a full-window <html> cover background, and a .hero-image div. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Full-window cover background (language: CSS):

html {
  background: url(img_man.jpg) no-repeat center fixed;
  background-size: cover;
}

Hero image block:

.hero-image {
  background: url(img_man.jpg) no-repeat center;
  background-size: cover;
  height: 500px;
  position: relative;
}

⚖️ 모순 및 업데이트 (Contradictions & updates)

No contradictions found in the source.

✅ 검증 상태 및 신뢰도

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

🔗 지식 그래프 (Knowledge Graph)

상위/루트: CSS Tutorial
관련 개념: CSS Multiple Backgrounds, CSS Background Origin, CSS Background Clip
참조 맥락: Referenced when sizing background imagery for responsive layouts, hero sections, or full-bleed page backgrounds.

📚 출처 (Sources)

[S1] W3Schools — CSS Background Size — https://www.w3schools.com/css/css3_background_size.asp

📝 변경 이력 (Change history)

2026-06-23: Initial draft synthesized from the W3Schools "CSS Background Size" page (Astra wiki-curation, P-Reinforce v3.1 format).

7.2 KiB Raw Blame History