CSS背景圖片在最右邊是一個(gè)比較常見的需求，特別是在需要實(shí)現(xiàn)橫向滾動(dòng)頁面的時(shí)候。下面我們來介紹一下實(shí)現(xiàn)這個(gè)效果的方法。

/* HTML代碼 */
<div class="container">
<div class="content">這是內(nèi)容區(qū)域</div>
<div class="bg"></div>
</div>
/* CSS代碼 */
.container {
position: relative;
overflow: hidden;
}
.content {
float: left;
width: 100%;
height: 100%;
}
.bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 500px; /* 背景圖片的寬度 */
background-image: url('bg.jpg');
background-repeat: no-repeat;
background-position: right top;
transform: translateX(100%); /* 這里用了transform來將背景圖片移動(dòng)到最右邊 */
z-index: -1; /* 將背景圖片z-index設(shè)置為-1，使其在內(nèi)容之下 */
}

以上代碼中，我們首先創(chuàng)建了一個(gè)容器（.container），并將其設(shè)置為相對(duì)定位，以便容器內(nèi)的元素可以使用絕對(duì)定位。然后我們創(chuàng)建了內(nèi)容區(qū)域（.content）和背景圖片（.bg）兩個(gè)元素。其中，內(nèi)容區(qū)域是一個(gè)普通的div，用來放置頁面內(nèi)容。而背景圖片則是一個(gè)空的元素，用來作為背景圖。

我們將背景圖片的寬度設(shè)置為固定的值，并將其定位到容器的最右邊。然后，我們使用了background-position來將背景圖片設(shè)置到最右邊，并使用background-repeat: no-repeat來禁止背景圖片重復(fù)。接著，我們使用了transform來將背景圖片移動(dòng)到最右邊，這里可以根據(jù)需要調(diào)整偏移量。最后，我們將背景圖片的z-index設(shè)置為-1，以便它處于內(nèi)容之下。

綜上所述，以上代碼可以實(shí)現(xiàn)一個(gè)寬度自適應(yīng)的橫向滾動(dòng)頁面，并將背景圖片固定在最右邊，形成非常美觀的效果。