讓網頁顯示更豐富，更加生動有趣是各位前端工程師的目標之一。而網頁的背景圖也是其中一個重要的元素之一。今天我們將會介紹一種新的使用方式：css背景圖長滾動條。

首先，我們需要定義好需要使用的背景圖。使用下面的代碼即可：

body {
background-image: url('images/background.jpg');
background-attachment: fixed;
background-size: cover;
}

接下來，我們需要聲明一個超出頁面寬度（無論是PC端還是移動端）的容器，以支持無限滾動。使用下面的代碼即可：

.container {
width: 200%;
height: 100vh;
overflow-x: auto;
overflow-y: hidden;
}

在容器內，我們可以添加需要滾動的內容和其他元素。需要注意的是，這些元素必須與背景圖一致。接著，在滾動完成時，需要用JS將滾動條的位置重置回第一屏，以保證滾動的無限循環：

$(window).resize(function() {
var w = $(this).width(),
container = $('.container');
container.css({
left: -w
});
});
$(window).trigger("resize");

就這樣，我們就可以在網頁上實現一個超棒的使用css背景圖長滾動條的效果了！