如何设置整页背景随页面加载而变化的div图像
[英]How to set full page background Image of a div that changes on page load
问题描述
I tried but couldn't get it done. 
我尝试过但无法完成。
I want the background of a div to cover full page according to the device width and it should change each time when page is load or refresh on same system. 我希望div的背景根据设备宽度覆盖整个页面，并且每次在同一系统上加载或刷新页面时，它的背景都应该改变。
I have tried many codes but none of them works for me. 我尝试了许多代码，但是没有一个对我有用。
Now the script that i am using is: 现在我正在使用的脚本是：
<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>
The HTML code is as follows HTML代码如下
<html>
<body>
<div id="image">
<div class = "container">
</div> <!--container ends-->
</div>
I want #image div background to cover full page. 我希望#image div背景能覆盖整个页面。 This is the CSS i am using: 这是我正在使用的CSS：
#image
{
width:100%;
height:100%;
background-repeat:no-repeat;
background-size:cover;
background-position:center;
}
Here is the link of the page: http://sahibfreelancer.hostzi.com/ No background image loading. 这是页面的链接： http : //sahibfreelancer.hostzi.com/没有背景图像加载。 Please if i miss anything you can let me know. 如果我想念任何东西，请告诉我。 I hope i gave enough details. 我希望我能提供足够的细节。 I am trying this from last one day. 我从最后一天开始尝试此操作。 Will be looking forward to your responses. 期待您的回复。
4 个解决方案
解决方案1
0 2015-08-29 16:17:35
I spotted a typo : 我发现了一个错字：
var spot =Math.floor(Math.random()* imgarry.length);
... should be ... ... 应该 ...
var spot =Math.floor(Math.random()* imgarray.length);
... shouldn't it ? ...不是吗？ Does it work if you edit that ? 如果您进行编辑，是否可行？
解决方案2
0 2015-08-29 16:18:14
Since you have jQuery in the tags, I'm going to assume you're using jQuery. 由于标签中包含jQuery，因此我假设您使用的是jQuery。
But that being said you're not using the $ syntax in your code examples. 但这就是说您在代码示例中没有使用$语法。
Here's how you can set the background with jQuery: 这是使用jQuery设置背景的方法：
$('#image').css('background-image', 'url(' + imageUrl + ')');
Edit: Looks like Ashugeo got it. 编辑：看起来像Ashugeo做到了。 Next time check the console for the output of your script, it would have been throwing an exception. 下次检查控制台的脚本输出时，它会抛出异常。
Also, if you are using jQuery, there's nicer ways to do what you're doing. 另外，如果您使用的是jQuery，则有更好的方法来完成您的工作。
解决方案3
0 2015-08-29 16:45:14
To make the image occupy the entire screen you can specify the viewport height in css like this #image {height:100vh} 要使图像占据整个屏幕，您可以像这样#image {height:100vh}在CSS中指定视口高度
Now for the javascript code everything looks fine to me if the images are in the specified url it should load them randomly. 现在，对于javascript代码，如果图像位于指定的url中，一切对我来说看起来都很好，它应该随机加载它们。 You can see a example here . 您可以在此处查看示例。
the only thing i've done is load the images over the web since i cant access them locally on fiddle. 我唯一要做的就是将图像加载到Web上，因为我无法在小提琴上本地访问它们。 A different Image is loading every time. 每次加载不同的图像。
As for the page load i've used a immediately invoking function which will fire when the contents are loaded but you can use onload as well. 至于页面加载，我使用了立即调用功能，该功能将在加载内容时触发，但您也可以使用onload 。
解决方案4
0 2015-08-29 17:08:10
I think its the path of your images. 我认为这是您拍摄图片的路径。 I pasteD your code and change the url and it works http://jsbin.com/pozadujeca/edit?js,console,output 我粘贴了您的代码并更改了网址，它可以正常运行http://jsbin.com/pozadujeca/edit?js，控制台，输出
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.