html - 使 background 在减少浏览器大小时填充 100%个浏览器的任何编码

  显示原文与译文双语对照的内容

我试图让我的background 变得固定,即使浏览器变小,内容运行到底部。

我现在所面临的问题是,background的大小不是标准尺寸 1366 *768, 现在是 1366 *1000, 。

当浏览器变小和内容窄时,background 无法固定内部内容,底部有白色区域,有什么方法解决。

谢谢

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>

时间: 原作者:

你可以尝试以下操作:

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/

...