Menu
I'm attempting to to randomly load an image each time a user visits the site. I've followed a tutorial and a couple of previous threads on the issue and can't seem to get it working. The images are in the /images/ folder and the filenames are correctly entered into the array:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" />
<script type="text/javascript">
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)] + ')'});
</script>
I've then entered the div in the body of the page, but to no avail:
<body>
<div ="#background"></div>
<div class="container">
</div>
</body>
Where am I going wrong?
220
To make a background image not repeat in HTML, specify no-repeat in the background-repeat property or the background shorthand property. The background image is set to 'no-repeat' using the 'background-repeat' property.
The background-repeat property sets if/how a background image will be repeated. By default, a background-image is repeated both vertically and horizontally. Tip: The background image is placed according to the background-position property.
The background-repeat CSS property sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.
Solution: // create a new Image object var img_tag = new Image(); // when preload is complete, apply the image to the div img_tag. onload = function() { document. querySelector('#div').
You must have comma separators between the array values when you define your array.
You should also have two separate script elements, one for including jquery and the other for your code.
The content of a script tag with a src-attribute should be ignored by most browsers.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript" ></script>
<script type="text/javascript">
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)] + ')'});
</script>
W3C 4.3 Scripting HTML5 says:
If there is a src attribute, the element must be either empty or contain only script documentation that also matches script content restrictions.
And the same is true for earlier versions I believe.
Edit:
If you are working on the local file system , make sure to change the URL to jQuery to http:// instead of just //.
Also, make sure your script is executed when the #background element exists by calling in on document ready.
This example should work even locally:
<html>
<head>
<style type="text/css">
#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;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript" ></script>
<script type="text/javascript">
$(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)] + ')'});
});
</script>
</head>
<body>
<div id="background"></div>
<div class="container">
</div>
</body>
</html>
<div ="#background"></div>
should be
<div id="background"></div>
(Or was that just a typo?)
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
