--- id: css-background-size title: "CSS Background Size" category: "Frontend" status: "draft" verification_status: "conceptual" canonical_id: "" aliases: ["background-size", "background cover", "background contain", "full size background", "hero image CSS", "responsive background image"] duplicate_of: "" source_trust_level: "B" confidence_score: 0.90 created_at: 2026-06-23 updated_at: 2026-06-23 review_reason: "" merge_history: [] tags: ["css", "web", "frontend", "w3schools", "background", "background-size"] raw_sources: ["https://www.w3schools.com/css/css3_background_size.asp"] applied_in: [] github_commit: "" --- # [[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 `` 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 `
` 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] ```css #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] ```css #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] ```css #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 `` element (the `` element is always at least the height of the browser window). [S1] ```css html { background: url(img_man.jpg) no-repeat center fixed; background-size: cover; } ``` **Hero image** You could also use different background properties on a `
` to create a hero image (a large image with text), and place it where you want. [S1] ```css .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 `` cover background, and a `.hero-image` div. No external project/commit applications found in the source. ## πŸ’» μ½”λ“œ νŒ¨ν„΄ (Code patterns) Full-window cover background (language: CSS): ```css html { background: url(img_man.jpg) no-repeat center fixed; background-size: cover; } ``` Hero image block: ```css .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).