CSS 實現全屏自適應背景圖：覆蓋與居中技巧

需求：一張 1300×200px 圖片作為頁面背景，要求鋪滿視口（如 1366px 寬），不重複、不變形、垂直居中。

核心 CSS 方案

body {
    margin: 0;
    background: url('bg.jpg') no-repeat center top;
    background-size: cover;      /* 關鍵：覆蓋整個容器 */
    background-attachment: fixed; /* 可選：視差滾動效果 */
    min-height: 100vh;           /* 確保 body 至少滿屏 */
}

關鍵屬性解析

兼容性補充

IE8 及以下不支援 `background-size`，可使用 `` 標籤絕對定位降級：

<img src="bg.jpg" style="position:fixed; top:0; left:0; width:100%; height:100%; z-index:-1;" />