背景图像的水平滚动答案

【问题标题】：Horizontal Scrolling of Background Image背景图像的水平滚动
【发布时间】：2012-07-25 06:28:12
【问题描述】：

我有一个 div，其中包含多个元素，其跨度比父 div 的宽度更远。我将 overflow-x 设置为滚动，并将 background-attachment 设置为滚动，但是当我左右滚动时，背景图像保持固定

这是该页面的链接：http://okcomputerstl.com/K9_Athletic_Club/services.html 砖背景是我想滚动的

这是css

.framecontain {
    width: 979px;
    height: 490px;
    position: relative;
    overflow-x: scroll;
    background-image: url(../graphics/services/brickbg.png);
}

.services .textbox {
    position: absolute;
    top: 52px;
    width: 395px;
    height: 358px;
    z-index: 2;
    background-image: url(../graphics/services/frame.png);
}

.services .one {
    left: 64px;
}

.services .two {
    left: 508px;
}

.services .three {
    left: 953px;
}

.services .four {
    left: 1388px;
}

.services .five {
    left: 1826px;
}

【问题讨论】：

我发现overflow-x 很糟糕。如果您使用完整的overflow: hidden，则不会发生这种情况。
有没有更好的方法来粘贴这个css？
@HenryWinn 我已将其添加到您的答案中。

标签： css

【解决方案1】：

我认为您必须将砖墙容器包装在另一个 div 中才能实现此目的。

<div id="container">  <!-- div having the scrollbar-->
  <div id="bricks"></div> <!-- div having the background-->
</div>

【讨论】：