CSS3 背景100% 很容易實現響應式布局中的全屏背景圖片，讓網頁看起來更加美觀、舒適。這里我們就來了解一下該功能的實現方式。

body {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

以上代碼中，使用CSS3中的background-size屬性來實現背景圖片大小的控制。屬性值cover表示讓圖片鋪滿整個容器，并且不會變形，同時圖片會被裁剪，只顯示容器所需要的部分。

如果背景圖片較小，可能會導致在瀏覽器大窗口或高分辨率的設備上出現出乎預期的效果，這時我們可以使用多個背景圖片，通過層疊的方式，削減背景圖片的失真程度：

body {
background-image: url(images/bg-1.jpg), url(images/bg-2.jpg);
background-repeat: no-repeat;
background-position: center top, center center;
background-size: auto 100%;
}

以上代碼中，我們使用了background-image屬性來應用多個背景圖片，background-position屬性可以讓圖片在容器中水平垂直居中，而不是在左上角。

最后，我們來說一下background-attachment屬性。它可以控制背景圖片的滾動方式，fixed表示即使頁面滾動，背景圖片也不動，而absolute則是相對于容器定位。

body {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
}

以上是CSS3 背景100%的基礎內容，希望可以對大家有所幫助。