您好！本文比较旧了。 我们在这里对其进行了修订，其中包含更多更好的信息。
过去几天推出全新的 CSS-Tricks 论坛 感觉很棒！我担心它需要一段时间才能流行起来，但过去几天大约有 150 个帖子，涵盖了许多很棒的主题。
其中一个很棒的主题是 John Steven 的背景挑战
我面临着一个挑战，为了庆祝这个新论坛，我想请您就这个问题启发我。我们需要一个 100% 宽度的背景，但在屏幕的 50% 上采用不同的图案。例如，制作宽度为 2500px 并重复 y 的背景图像并不是我想要的。
我的第一个想法是创建 2 个 div，一个 leftHalf 和一个 rightHalf
#leftHalf {
background: url(images/bg-1.jpg);
width: 50%;
position: absolute;
left: 0px;
height: 100%;
}
#rightHalf {
background: url(images/bg-2.jpg);
width: 50%;
position: absolute;
right: 0px;
height: 100%;
}这可以工作，但它有一个“小”（字面意思）问题。当浏览器窗口的宽度为奇数像素时，该数字没有偶数的 50% 分割，并且您会在两个 div 之间的中间得到一条细细的白条。
John 本人建议对该解决方案进行完美的调整，从而解决了这个问题。不要使用 leftHalf，只需将该背景图像应用于整个 body 元素即可。这解决了白条问题，并且也减少了标记的使用！
（是的，左半部分的图案排列得不太正确，但这里重要的是理论！）
使用 1280×1024 监视器时存在问题。
http://farm4.static.flickr.com/3169/2384472443_bbf251138b_o.gif
PS：抱歉我的英语
只是图像错误，DAG。不是代码；)
正确；)
问题在于图像的重复。
PS：我已经注册了论坛。赞美。
我们在 cssoff 首页上实现了非常类似的东西。看看。
我刚刚做了几乎相同的事情，但将左侧 div 增加到 60%，并将右侧 div 保持在 50%，并将右侧 div 放在顶部。因此，左侧在它下面重复。
但是，我遇到的问题是，无论我将空 div 或 css 放在哪里，我都无法让任何内容位于顶部。我花了一些时间尝试不同的 z-index 值，但没有任何效果。
您的示例中没有任何内容，因此我想知道您是否也会遇到同样的问题。
这是将左侧应用于 body 而不是空 div 后的结果
http://digitalskraps.com/test/ctchallenge.html
当我将负 zIndex 应用于右侧 div 时，它会位于 body 下方。当我将任何组合的 zIndex 应用于容器和右侧 div 时，没有任何变化。我的 div 甚至位于内容之后。
（css 在头部）
此 CSS 技巧在 IE6 下不起作用。我认为它需要 JavaScript 修复才能在 100% 的 body 高度上显示。
此致
如果有人想使用可以很好地重复的图像副本，请复制此 http://209.98.250.109/css-tricks/splitbackground/bg-1.jpg（您可以直接使用它，但我肯定不会信任我的互联网连接……我的网络很混乱）
尝试这个，您将不需要 div 标签，只需要 HTML 和 Body 标签即可
html, body {
height: 100%;
margin: 0px;
padding: 0px;
background-repeat: repeat;
background-position: left top;
}
html {
background-image: url(https://css-tricks.cn/examples/SplitBackgroundPattern/images/bg-1.jpg);
width: 100%;
}
body {
background-image: url(https://css-tricks.cn/examples/SplitBackgroundPattern/images/bg-2.jpg);
width: 50%;
}
也许您只需要 1 个 div。使 Body 元素中的背景完整并一直重复。然后在它的顶部制作一个 50% 的右侧 div。这样，您就不会遇到任何奇数像素宽度的复杂情况。
在 css 中使用双色背景图像来创建悬停效果等的问题是，当用户增加字体大小并且其框变得更大时，它会显示图像的另一侧。
如果它是渐变图像，并且您在正常情况下将背景位置设置为顶部，背景颜色为 X，然后在悬停时将背景位置设置为底部，背景颜色为 Y 等，则可以解决此问题。
此技巧的关键在于准备图像。其中一个图像应在其内部构建水平重复。它的一半宽度也应该是透明的。
然后可以在没有任何额外 html 和对 body/ 的宽度限制的情况下实现效果。
css（由于使用了 min-height 而略有 hack）
*{margin:0;padding:0;}
html{
background: url(bg-2.jpg) repeat ;
height:100%;}
body{
background: url(body_bg.gif) repeat-y top center;
min-height:100%;height:auto!important;
演示
“此技巧……” – 抱歉
如何使它能够适应 iPad 等较小的屏幕，而不会切入左侧图像？因此，两者都会保持其比例并相应地放大和缩小？
我想通了
body {
background: url(‘left.jpg’), url(‘right.jpg’);
background-position: top left, top right;
background-repeat: no-repeat, no-repeat;
background-size: 50%, 50%;
}