如何在javascript中更改主体背景图片大小？

Question

我正在尝试将我的“身体”背景图片调整为浏览器的文档大小。 当我运行它时，这里的代码不会改变浏览器中的任何内容……我看到了图像，但是重复了两次，并且大小没有变化。 调试时，我看到width和height变量正确，但实际上什么也没发生。

 $(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;
}

希望这可以帮助