减小浏览器大小时使背景填充 100% 的任何编码答案

【问题标题】：any coding to make the background filled out 100% of the browser when reduce the size of the browser减小浏览器大小时使背景填充 100% 的任何编码
【发布时间】：2014-07-03 12:35:28
【问题描述】：

我试图让我的背景变得固定，即使浏览器变小并且内容运行到底部。

我现在面临的问题是，我的背景尺寸不是标准尺寸1366*768，我现在的尺寸是1366*1000，所以我的网站可以滚动了。

当浏览器变小，内容变窄时，我的背景无法固定内容的下部，底部会出现白色区域，有什么办法解决吗？

谢谢

CSS：

body {
    background-attachment: scroll;
    background-image: url(img/homebg.png);
    background-repeat: no-repeat;
    background-position: center top;
    -webkit-background-size: cover;
    -moz-background-size: 100% 100%, auto;
    -o-background-size: 100% 100%, auto;
    background-size: 100% 100%, auto;
    height: 100%;
    background-size: cover;
    margin: 0;
    padding: 0;
    color: #000;
    font-family: KaiTi, "Century Gothic";
    font-size: 100%;
    line-height: 1.4;
}

html {
    height: 100%;
    padding: 0;
    margin: 0;
}

.container {
    width: 1200px;
    margin: 0 auto;
}

更新了（我说的对吗？）

body {
    background: url(img/homebg.png) no-repeat top left scroll;
    background-size: auto auto;
    margin: 0;
    padding: 0;
    color: #000;
    font-family: KaiTi, "Century Gothic";
    font-size: 100%;
    line-height: 1.4;
}

html {
    height:100%;
    padding:0;
    margin:0;
}

</style>
</head>

<body>
<script>
function resizeIt() {
    $("body").css("background-size", $(document).width() + "px " + $(document).height() +"px");
}
$(window).resize(function () {
    resizeIt();
});
resizeIt();
</script>
</body>

【问题讨论】：

你想让你的图像拉伸到最底部吗？还是……？
如果我理解正确，您希望背景图像覆盖整个页面，而不管其大小。如果是这种情况，那么您可能需要检查：srobbin.com/jquery-plugins/backstretch
@shodaburp 是的，这就是我想要的。但是我的背景图片大小是1366*1000，我的网页大小应该是1366*1000，这样就可以滚动了。但是当我减小浏览器的大小时，我的内容会变长，但我的背景图片无法修复，因此底部会有空白，有什么方法可以解决？
@Thauwa 没有拉伸到最底部，我只希望我的图像覆盖整个页面，而不管浏览器大小如何，我希望我的 bg 图像保持静态，即使内容缩小。我希望我的背景图像变成静态的 1366*1100，只是我的内容能够滚动。因为我的bg图片不是标准尺寸，请问有什么方法可以解决吗？

标签： html css background height width

【解决方案1】：

您可以尝试以下方法：

CSS

body {
    background: url(yourImage.jpg) no-repeat top left scroll;
    background-size: auto auto;
    color: #000;
    font-family: KaiTi, "Century Gothic";
    font-size: 100%;
    line-height: 1.4;
}
.container {
    margin: 0 auto;
}

jQuery

function resizeIt() {
    $("body").css("background-size", $(document).width() + "px " + $(document).height() + "px");
}
$(window).resize(function () {
    resizeIt();
});
resizeIt();

演示： http://jsfiddle.net/thauwa/P7GM4/

【讨论】：

不工作...调整浏览器大小时，bg图像仍然无法覆盖整个页面。
您查看了演示吗？这就是你想要的吗？
是的，这就是我想要的，但为什么不能成功？
您是否在测试页面中包含了 jQuery？您是否检查了 Web 浏览器的控制台日志是否有错误？您是否从 CSS 中删除了 cover 属性？
我不确定什么是“控制台错误日志”，我已经更新了我的新代码，请帮我检查一下，谢谢。