100％背景图块，以100％高度divs为单位

Question

I am having an issue with a layout I am trying to develop. 我正在尝试开发的布局存在问题。 I basically have split the view-port into 2 equal width divs with a different background tiled image in each. 我基本上已经将视口分为2个相等宽度的div，每个div中都有不同的背景平铺图像。

I have it stretching full screen 100%, but have a problem on scrolling. 我将其全屏拉伸了100％，但是在滚动时遇到了问题。

The background image is cropped to the original height of the view-port..! 背景图像被裁剪为视口的原始高度。

Here's the html: 这是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>

Here's the css: 这是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);
}

I'm wondering if the is maybe a javascript, hence included in this cat also. 我想知道是否可能是JavaScript，因此也包括在这只猫中。

Answer 1

I would use Firebug or similar to verify that it's a background problem, not a DIV sizing problem. 我将使用Firebug或类似工具来验证这是背景问题，而不是DIV尺寸问题。 Maybe what's clipped is not your BG image, but rather the height of your DIVs. 可能剪切的不是您的BG图像，而是您DIV的高度。

If this is not the case, you can try adding 如果不是这种情况，可以尝试添加

background-repeat:repeat,

to your CSS for div.half , but this is already the default value, so unless you have some CSS somewhere overriding it, should be in place anyway. 到div.half的CSS中，但这已经是默认值，因此，除非您有一些CSS可以覆盖它，否则无论如何都应该存在。

Answer 2

This seems to get me the result i want, not tested in explorer yet though. 这似乎给我我想要的结果，尽管尚未在资源管理器中进行测试。

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;
}

Answer 3

I haven't run this code but adding it to the existing code should work (I hope :P). 我没有运行此代码，但是将其添加到现有代码中应该可以工作（我希望：P）。 You can keep the divs and their backgrounds fixed where they are using something like: 您可以使用以下方法将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 */
 }

100％背景图块，以100％高度divs为单位

问题描述

3 个解决方案

解决方案1
0 2010-09-29 12:52:14

解决方案2
0 2010-09-29 14:45:04

解决方案3
0 2010-09-30 00:47:27

100％背景图块，以100％高度divs为单位

问题描述

3 个解决方案

解决方案1 0 2010-09-29 12:52:14

解决方案2 0 2010-09-29 14:45:04

解决方案3 0 2010-09-30 00:47:27

解决方案1
0 2010-09-29 12:52:14

解决方案2
0 2010-09-29 14:45:04

解决方案3
0 2010-09-30 00:47:27