我正在尝试开发一个布局问题。我基本上将视口拆分为2个相等宽度的div，每个div都有不同的背景平铺图像。
我让它全屏拉伸100％，但在滚动时有问题。
背景图像被裁剪为视口的原始高度..！
这是html：
<body>
<div id="container">
<div id="left" class="half">
left content here
</div>
<div id="right" class="half">
right content here
</div>
</div>
</body>
这是css：
html, body {
margin:0;
padding:0;
height:100%;
font: 14px Gotham, "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
color: #505050;
}
div#container {
height: 100%;
min-width: 800px;
min-height: 500px;
}
div.half {
height: 100%;
width: 50%;
}
div.half#left {
float: left;
text-shadow: 0px 1px 1px white;
background-image: url(images/metalBG.jpg);
}
div.half#right {
float: right;
text-shadow: 0px -1px 1px black;
background-image: url(images/fabricBG.jpg);
}
我想知道这可能是一个javascript，因此也包含在这只猫中。
我会使用Firebug或类似的方法来验证它是一个背景问题，而不是DIV大小调整问题。也许剪裁的不是你的BG图像，而是你的DIV的高度。
如果不是这种情况，您可以尝试添加
background-repeat:repeat,
你的CSS为div.half，但这已经是默认值，所以除非你有一些CSS覆盖它，否则应该就位。
这似乎得到了我想要的结果，虽然没有在资源管理器中测试过。
html {
margin:0;
padding:0;
font: 14px Gotham, "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
color: #505050;
background-image: url(images/metalBG.jpg);
}
body {
float:right;
margin:0;
padding:0;
width:50%;
background-image: url(images/fabricBG.jpg);
}
#left {
float:left;
margin-left:-600px;
width:550px;
}
我没有运行此代码，但将其添加到现有代码应该工作（我希望：P）。您可以将div和他们的背景固定在他们使用的地方：
.half{
position:fixed; /* keeps the divs in the same place */
overflow:auto; /* overflowing content will scroll */
background-attachment:fixed; /* the background won't scroll with content */
}