blocks|key|1014594|text|我发现了一个打字错误：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1014595|var+spot+=Math.floor(Math.random()*+imgarry.length);|code-block|syntax|javascript|1014596|..。应该是...|1014597|var+spot+=Math.floor(Math.random()*+imgarray.length);++|1014598|..。不是吗？如果你编辑它，它会起作用吗？|1014599|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I spotted a typo :

<pre><code>var spot =Math.floor(Math.random()* imgarry.length);
</code></pre>

... should be ...

<pre><code>var spot =Math.floor(Math.random()* imgarray.length); 
</code></pre>

... shouldn't it ? Does it work if you edit that ?

blocks|key|1014614|text|由于您的标记中有jQuery，因此我将假定您使用的是jQuery。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1014615|但话虽如此，您并没有在代码示例中使用$语法。|1014616|下面是使用jQuery设置背景的方法：|1014617|$('#image').css('background-image',+'url('+%2B+imageUrl+%2B+')');|code-block|syntax|javascript|1014618|1014619|编辑：看起来像是Ashugeo得到了它。下次检查控制台中的脚本输出时，可能会抛出一个异常。|offset|length|style|BOLD|1014620|此外，如果你正在使用jQuery，有更好的方法来做你正在做的事情。|1014621|entityMap^0|0|0|0|0|0|0|3|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|X|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|Y|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|10|8|@$N|11|O|12|P|Q]]|9|@]|A|$]]|$1|R|3|S|5|6|7|13|8|@]|9|@]|A|$]]|$1|T|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|U|$]]

Since you have jQuery in the tags, I'm going to assume you're using 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:

<pre><code>$('#image').css('background-image', 'url(' + imageUrl + ')');
</code></pre>

<hr>

Edit:
Looks like Ashugeo got it. 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.

blocks|key|3154028|text|要使图像占据整个屏幕，您可以在css中指定视口高度，如下所示的#image+{height:100vh}|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3154029|现在，对于javascript代码来说，如果图片在指定的url中，我觉得一切都很好，它应该随机加载它们。您可以看到一个示例。|3154030|我所做的唯一一件事就是通过网络加载图片，因为我无法在fiddle上本地访问它们。每次都会加载不同的图像。|3154031|至于页面加载，我使用了一个立即调用函数，该函数将在加载内容时触发，但您也可以使用onload。|3154032|entityMap^0|V|L|0|0|0|14|6|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|R|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|L|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|M|$]]

To make the image occupy the entire screen you can specify the viewport height in css like this <code>#image {height:100vh}</code>

Now for the javascript code everything looks fine to me if the images are in the specified url it should load them randomly. You can see a example <a href="http://jsfiddle.net/p19ag0fe/" rel="nofollow">here</a>.

the only thing i've done is load the images over the web since i cant access them locally on fiddle. 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 <code>onload</code> as well.

blocks|key|1020742|text|我想这就是你的图像之路。我pasteD你的代码和改变网址，它是工作的http://jsbin.com/pozadujeca/edit?js,console,output|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1020743|entityMap|0|LINK|mutability|MUTABLE|url|http://jsbin.com/pozadujeca/edit?js,console,output^0|Y|1E|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

I think its the path of your images.
I pasteD your code and change the url and it works <a href="http://jsbin.com/pozadujeca/edit?js,console,output" rel="nofollow">http://jsbin.com/pozadujeca/edit?js,console,output</a>

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.

I have tried many codes but none of them works for me.

Now the script that i am using is:

<pre><code>&lt;script type="text/javascript"&gt; 
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]+")"; 
} 
&lt;/script&gt;
</code></pre>

The HTML code is as follows

<pre><code>&lt;html&gt;
&lt;body&gt;
&lt;div id="image"&gt;
 &lt;div class = "container"&gt; 
 &lt;/div&gt; &lt;!--container ends--&gt;
&lt;/div&gt;
</code></pre>

I want <code>#image</code> div background to cover full page.
This is the CSS i am using:

<pre><code>#image
{
 width:100%;
 height:100%;
 background-repeat:no-repeat;
 background-size:cover;
 background-position:center;
}
</code></pre>

Here is the link of the page: <a href="http://sahibfreelancer.hostzi.com/" rel="nofollow">http://sahibfreelancer.hostzi.com/</a>
No background image loading.
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.

How to set full page background Image of a div that changes on page load

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我试过了，但做不到。我想一个div的背景覆盖整个页面根据设备宽度，它应该改变每次页面加载或刷新在同一系统上。我试过很多代码，但没有一个对我有效。现在我使用的脚本是：<script type="text/javascript"> window.onload=function(){ var thediv=docu...

问如何设置在页面加载时更改的div的全页背景图像
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何设置在页面加载时更改的div的全页背景图像EN