Question

我正在尝试将我的“正文”背景图片与浏览器文档大小相匹配。这个代码在运行时不会改变浏览器中的任何内容...我看到图像但重复两次，大小不变。在调试时我看到宽度和高度变量是正确的但实际上没有发生任何想法？

$(function() { // onload...do
var width = $(document).width();
var height = $(document).height();

$('body').css.backgroundSize = "" + width + "px " + height + "px";

});

body{
    background: url(../images/MainMenuScreen.jpg);
}

Answer 1

试试这个：

#yourdiv /* with CSS 3 */
{  
 background: url(../images/MainMenuScreen.jpg) no-repeat;
 background-size: 100%;
}

Answer 2

您可以使用background-size：cover属性。使用“background-size：cover”属性将为您提供以下优势： 1.它用图像填充整个页面，没有空格 2.根据需要缩放图像 3.保留图像比例（宽高比） 4.图像以页面为中心 5.不会导致滚动条 6.尽可能跨浏览器兼容

这是css（如果你想将它应用于整个页面）：

html { 
background: url(../images/MainMenuScreen.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

希望这有帮助

如何在javascript中更改正文背景图片大小？

2 个答案: