CSS是web前端設計中不可缺少的一部分。在網頁設計中使用圖片背景有時候會出現不協調的情況，這時需要使用CSS來解決這個問題。今天我們來探討一下如何使用CSS將圖片鋪滿背景。

body {
background-image: url("bg-image.jpg");
background-repeat: no-repeat;
background-size: cover;
}

上面的代碼讓圖片不重復出現在背景，然后使用cover關鍵字把背景圖片調整到全屏狀態。接下來讓我們來詳細解釋這個代碼。

首先，我們要通過CSS選擇器選中body標簽，然后指定background-image屬性來指定我們的背景圖片，圖像可以是URI，也可以是plain-text。接下來，我們把background-repeat設為no-repeat，這樣圖片就不會在背景中重復出現。最后，我們使用background-size屬性來指定圖片大小和如何使用它進行縮放和裁剪：

background-size : cover|contain|length|%|auto

上面代碼中cover選項是我們想要的，這樣我們的背景可以鋪滿整個屏幕。其他的選項包括contain, length, %, 和auto。contain使背景圖片適應容器大小而不是鋪滿整個屏幕；length和%讓您指定不同的長度和寬度；而auto讓瀏覽器根據背景圖像的原始尺寸來自適應它的大小。

最終的效果如下所示：

body {
background-image: url("bg-image.jpg");
background-repeat: no-repeat;
background-size: cover;
}

如果您需要讓背景圖片固定位置，可以使用background-attachment屬性，如：

body {
background-image: url("bg-image.jpg");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}

這個CSS讓背景圖片和網頁一起滾動，這個CSS在頁面滾動時可以創造比較酷的效果，但是會犧牲一些性能。