---
id: howto-css-button-on-image
title: "How To - Button on Image"
category: "Web_Recipes"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["overlay button on image CSS"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.82
created_at: 2026-07-04
updated_at: 2026-07-04
review_reason: ""
merge_history: []
tags: ["howto", "css", "w3schools", "buttons", "images"]
raw_sources: ["https://www.w3schools.com/howto/howto_css_button_on_image.asp"]
applied_in: []
github_commit: ""
---

# [[HOWTO CSS Button On Image]]

## 🎯 한 줄 통찰 (One-line insight)
This recipe combines two previously-seen techniques into a compound pattern: a `.container { position: relative; }` wrapper establishes the positioning context (same role as the `.container` in `[[HOWTO CSS Split Screen]]`), and the button itself uses the exact `position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);` centering formula from `[[HOWTO CSS Center Button]]` — the only new element is that the "container" here holds a responsive image (`width: 100%; height: auto;`) instead of arbitrary content, so the button ends up perfectly centered ON TOP of whatever size the image happens to render at. [S1]

## 🧠 핵심 개념 (Core concepts)
- **`position: relative` container** — establishes the positioning context so the button's `position: absolute` is relative to the image container, not the whole page. [S1]
- **Responsive image** — `img { width: 100%; height: auto; }` scales the image to its container's width while preserving aspect ratio. [S1]
- **Absolute + transform centering** — the exact same `top: 50%; left: 50%; transform: translate(-50%, -50%);` formula from the general centering recipes, applied to overlay a button on the image regardless of the image's actual rendered size. [S1]

## 📖 세부 내용 (Details)
- `.container { position: relative; width: 50%; } .container img { width: 100%; height: auto; } .container .btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 5px; }`. [S1]

## ⚖️ 모순 및 업데이트 (Contradictions & updates)
- **기존 두 레시피의 조합**: `[[HOWTO CSS Split Screen]]`의 relative 컨테이너 패턴과 `[[HOWTO CSS Center Button]]`의 absolute+transform 중앙 정렬 공식이 그대로 결합되어 사용된다는 점이 확인됨 — 새로운 기법이 아니라 두 기존 패턴의 합성. [S1]

## 🛠️ 적용 사례 (Applied in summary)
눈 덮인 풍경 이미지 위에 "Button"이라는 버튼을 정중앙에 오버레이하는 예제가 원문에서 직접 제시됨. [S1]

## 💻 코드 패턴 (Code patterns)
A button centered on top of a responsive image (CSS):
```css
.container { position: relative; width: 50%; }
.container img { width: 100%; height: auto; }
.container .btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
```

## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
- **신뢰 점수:** 0.82
- **중복 검사 결과:** 신규 생성 (New discovery)

## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[W3Schools HOW TO]]
- **관련 개념:** [[HOWTO CSS Center Button]], [[HOWTO CSS Split Screen]], [[HOWTO CSS Form On Image]]
- **참조 맥락:** CSS Buttons 섹션.

## 📚 출처 (Sources)
- [S1] W3Schools — How To - Button on Image — https://www.w3schools.com/howto/howto_css_button_on_image.asp

## 📝 변경 이력 (Change history)
- 2026-07-04: Initial draft synthesized from the W3Schools "How To - Button on Image" recipe (Astra wiki-curation, P-Reinforce v3.1 format).
