任何编码都可以使背景填充100%的浏览器时减小浏览器的大小

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

我现在面临的问题是，我的背景尺寸不是标准尺寸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>

您可以尝试以下操作:

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/

相关内容

最新更新

热门标签：