Question

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

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

Answer 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();

DEMO： http://jsfiddle.net/thauwa/P7GM4/

任何编码，以减少浏览器的大小，使背景填写100％的浏览器

1 个答案: