HTML5 背景圖自適應視窗大小：background-size: cover 完美解決

CSS 方案

body {
    background-image: url('bg.jpg');
    background-size: cover;      /* 關鍵：覆蓋整個容器，保持比例 */
    background-position: center; /* 居中 */
    background-repeat: no-repeat;
    background-attachment: fixed; /* 可選：視差滾動效果 */
}

屬性值對比

• cover：縮放圖片以完全覆蓋容器，可能裁切邊緣。
• contain：縮放以完整顯示圖片，可能留白。
• 100% 100%：強制拉伸填滿，變形。

相容性

IE9+、所有現代瀏覽器支援。IE8 需用 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader hack 或 JS 動態計算。