如何设置在页面加载时更改的div的全页背景图像
我试过了，但做不到。
我想一个div的背景覆盖整个页面根据设备宽度，它应该改变每次页面加载或刷新在同一系统上。
我试过很多代码，但没有一个对我有效。
现在我使用的脚本是：
<script type="text/javascript">
window.onload=function(){
var thediv=document.getElementById("image");
var imgarray = new Array("../bgimages/1.png", "../bgimages/2.png", "../bgimages/3.png");
var spot =Math.floor(Math.random()* imgarry.length);
thediv.style.background="url("+imgarray[spot]+")";
}
</script>HTML代码如下所示
<html>
<body>
<div id="image">
<div class = "container">
</div> <!--container ends-->
</div>我希望#image的div背景覆盖整个页面。这是我正在使用的CSS：
#image
{
width:100%;
height:100%;
background-repeat:no-repeat;
background-size:cover;
background-position:center;
}这是页面的链接：http://sahibfreelancer.hostzi.com/ No background image link。如果我错过了什么，请让我知道。我希望我给出了足够的细节。我从最后一天开始尝试。期待您的回复。
回答 4
Stack Overflow用户
发布于 2015-08-30 00:17:35
我发现了一个打字错误：
var spot =Math.floor(Math.random()* imgarry.length);..。应该是...
var spot =Math.floor(Math.random()* imgarray.length); ..。不是吗？如果你编辑它，它会起作用吗？
Stack Overflow用户
发布于 2015-08-30 00:18:14
由于您的标记中有jQuery，因此我将假定您使用的是jQuery。
但话虽如此，您并没有在代码示例中使用$语法。
下面是使用jQuery设置背景的方法：
$('#image').css('background-image', 'url(' + imageUrl + ')');编辑：看起来像是Ashugeo得到了它。下次检查控制台中的脚本输出时，可能会抛出一个异常。
此外，如果你正在使用jQuery，有更好的方法来做你正在做的事情。
Stack Overflow用户
发布于 2015-08-30 00:45:15
要使图像占据整个屏幕，您可以在css中指定视口高度，如下所示的#image {height:100vh}
现在，对于javascript代码来说，如果图片在指定的url中，我觉得一切都很好，它应该随机加载它们。您可以看到一个示例。
我所做的唯一一件事就是通过网络加载图片，因为我无法在fiddle上本地访问它们。每次都会加载不同的图像。
至于页面加载，我使用了一个立即调用函数，该函数将在加载内容时触发，但您也可以使用onload。
https://stackoverflow.com/questions/32288049
复制相似问题
腾讯云开发者
