HTML 背景圖片自適應：background-size:cover 實現全屏鋪滿不變形

問題現象

body { background: url(bg.jpg); } 導致圖片橫向重複平鋪，顯示一張半被截斷。

解決方案：CSS3 background-size

body {
    background-image: url('bg.jpg');
    background-size: cover;      /* 關鍵：縮放填滿整個容器，保持比例 */
    background-position: center; /* 居中顯示 */
    background-repeat: no-repeat; /* 防止平鋪 */
    background-attachment: fixed; /* 可選：視差滾動效果 */
    min-height: 100vh;           /* 確保 body 至少佔滿視口高度 */
}

background-size 取值對比

設計師協作建議

1. 背景圖分辨率 ≥ 1920×1080（主流屏幕），建議 2560×1440 或 3840×2160。
2. 圖片主體內容置中，邊緣留白/可裁剪區域，適配 cover 裁剪。 3. 文件大小優化：WebP 格式、壓縮至 200-500KB，首屏加載 < 3s。

備選方案：img 標簽 + 定位

<img src="bg.jpg" class="bg-image" />
.bg-image {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover; /* 同等於 background-size:cover */
    z-index: -1;
}

總結

使用 background-size: cover; background-position: center; background-repeat: no-repeat; 三連擊，配合設計師提供足夠分辨率圖片，即可實現全屏背景自適應無變形、無重複。