Css 绝对定位重复背景不'；不要拉伸以填充页面_Css_Background

Css 绝对定位重复背景不'；不要拉伸以填充页面

css

Css 绝对定位重复背景不'；不要拉伸以填充页面,css,background,Css,Background,可能重复：基本上，我的CSS设置如下： body { font-family: "Open Sans", Arial, sans-serif; background: url(images/body-background-gradient.png) repeat-x #343434; text-align: center; } #background-tile { background: url(image

可能重复：

基本上，我的CSS设置如下：

   body {
        font-family: "Open Sans", Arial, sans-serif;
        background: url(images/body-background-gradient.png) repeat-x #343434;
        text-align: center;
    }
    #background-tile {
        background: url(images/body-background-tile.png) repeat;
        width: 100%;
        min-height: 100%;
        height: auto;
        position: absolute;
        left: 0;
        top: 0;
        z-index: -2;
    }

HTML:

<body>
    <div id="background-tile"></div>
        ...
</body>

...

主体具有水平重复的背景渐变。我在主体内部有一个空的div（#background tile），它充当覆盖背景-只是一个重复的2x2像素正方形图案

问题是，当页面延伸到超过浏览器的高度时，平铺图案不会继续填充背景的其余部分，因此我最终在页面底部找到了一个没有平铺背景的部分，只有灰色背景。我已经做了一些搜索，但是找不到一个可行的解决方案

截图：

非常感谢您的帮助。谢谢。

删除此项

width: 100%;
        min-height: 100%;
        height: auto;

它将尺寸设置为您正在使用的屏幕的高度…而不是整个网页。如果该代码与代码的任何其他部分相关，则您可能需要找到绕过它的方法。

尝试给

主体一个相对的位置，以及.background tile
一个100%
的高度（并去掉最小高度）
如果您希望背景图像重复并平铺以填充整个页面背景，为什么不能将其设置为正文
中的背景？@bfavaretto，不，不是重复的，但感谢您的建议。@daGUY，正如您在代码中看到的，我已经在背景中设置了背景渐变图像。背景是用来覆盖背景的。但是你试过我发布的链接中的解决方案吗？它基本上是将bottom:0
添加到#背景磁贴中。无论如何，谢谢。谢谢你的评论，但是如果我删除了宽度和高度属性，它就不会出现——但这是预期的，因为它是空的。我不知道你是如何设置html的，它到底应该是什么样子。你能发布你的html吗？更新了。基本上，无论页面有多长，“背景”平铺都应该是整个背景的大小。但正如你从屏幕截图中看到的，它的大小与浏览器窗口的大小相同，所以向下滚动时会突然结束。不，这也不起作用。谢谢。你还需要给body
一个100%的高度吗？在开始任何布局之前，我总是将html
和body
的高度设置为100%。