CSS background-image 設置背景圖片：容器無內容時必須指定寬高

結論先行

背景圖片不會撐開容器。只有容器的**內容**或**顯式寬高**才能決定容器大小。
body 特殊：瀏覽器默認鋪滿視口，故似乎不需寬高；div 等普通元素無內容時高度為 0，背景圖不顯示。

原理圖解

/* 無寬高、無內容 */
.div1 { background: url(img.jpg); }
→ 渲染: 0×0 不可見

/* 有寬高 */
.div2 { background: url(img.jpg); width: 300px; height: 200px; }
→ 渲染: 300×200 顯示背景

/* 有內容 */
.div3 { background: url(img.jpg); }
文字內容撐開高度
→ 渲染: 適應內容大小顯示背景

為什麼 body 看似不需要寬高？

• 瀏覽器默認 html, body { height: 100%; } (部分瀏覽器)
• body 是文檔根容器，默認鋪滿視口
• 實際上 body 也有隱式寬高，只是由瀏覽器自動計算

最佳實踐：背景圖片容器標準寫法

.bg-container {
    /* 1. 顯式尺寸 (二選一) */
    width: 100%;           /* 響應式寬度 */
    height: 300px;         /* 固定高度 */
    /* 或 */
    aspect-ratio: 16/9;    /* 現代 CSS: 固定寬高比 */
    
    /* 2. 背景圖片核心屬性 */
    background-image: url('img.jpg');
    background-size: cover;      /* 覆蓋容器，保持比例裁剪 */
    background-position: center; /* 居中對齊 */
    background-repeat: no-repeat; /* 不平鋪 */
    background-color: #f0f0f0;   /* 兜底色，圖片加載前/失敗時顯示 */
    
    /* 3. 現代簡寫 */
    background: url('img.jpg') center/cover no-repeat #f0f0f0;
}

常見場景解決方案

background-size 關鍵值

• cover：縮放填滿容器，**可能裁剪**，最常用
• contain：縮放完整顯示，**可能留白**
• 100% 100%：拉伸填滿，**變形**
• auto：原始尺寸

調試技巧

/* 開發時加紅框可視化容器範圍 */
.bg-container { outline: 2px solid red; }

/* 或開發者工具: Elements → Computed → Box Model 查看實際尺寸 */

總結

• ❌ background-image **不會** 撐開容器
• ✅ 容器需 **顯式寬高** 或 **有內容撐開**
• 💡 推薦：width: 100%; aspect-ratio: 16/9; background: center/cover no-repeat;
• 🎯 body 只是瀏覽器幫你算好了尺寸，本質相同