Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>You must have comma separators between the array values when you define your array.</p> <p>You should also have two separate script elements, one for including jquery and the other for your code.</p> <p>The content of a script tag with a src-attribute should be ignored by most browsers.</p> <pre><code>&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript" &gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; var images = ['OUT01ari.jpg', 'OUT02adobe.jpg', 'OUT03alife.jpg', 'OUT04chinup.jpg', 'OUT05datenightwinecologne.jpg', 'OUT06officechair.jpg', 'OUT07printer.jpg', 'OUT08whitewall.jpg', 'OUT09umbrella.jpg', 'OUT10converse.jpg', 'OUT11wardrobebar.jpg']; $('#background').css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'}); &lt;/script&gt; </code></pre> <p><a href="http://www.w3.org/TR/html5/scripting-1.html">W3C 4.3 Scripting HTML5</a> says:</p> <blockquote> <p>If there is a src attribute, the element must be either empty or contain only script documentation that also matches script content restrictions.</p> </blockquote> <p>And the same is true for earlier versions I believe.</p> <p><strong>Edit:</strong></p> <p>If you are working on the local file system , make sure to change the URL to jQuery to <strong>http://</strong> instead of just <strong>//</strong>.</p> <p>Also, make sure your script is executed when the #background element exists by calling in on <a href="http://api.jquery.com/ready/">document ready</a>.</p> <p>This example should work even locally:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; #background { position:fixed; left: 0px; top: 0px; background-size:100%; width:100%; height:100%; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; z-index:9990; } &lt;/style&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript" &gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(function() { var images = ['OUT01ari.jpg', 'OUT02adobe.jpg', 'OUT03alife.jpg', 'OUT04chinup.jpg', 'OUT05datenightwinecologne.jpg', 'OUT06officechair.jpg', 'OUT07printer.jpg', 'OUT08whitewall.jpg', 'OUT09umbrella.jpg', 'OUT10converse.jpg', 'OUT11wardrobebar.jpg']; $('#background').css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'}); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="background"&gt;&lt;/div&gt; &lt;div class="container"&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload