I want the background full image on div id="img" to change whenever the page is reloaded, can this be done on pure css or javascript is required?. Here is my http://jsfiddle.net/9Dp2e/ I am using javascript with jquery to change the background image randomly, but I doesn't work using the code below, any help would be appreciated.
Here is my html:
<div id="header">
<ul>
<div id="wrapper">
<li class="logo"></li>
<li>Homes</li>
<li>Offices</li>
<li>Products</li>
<li></li>
<li></li>
</div>
</ul>
</div>
<div id="center">
<div id="slider">
<div id='footercopy'>
<p>Copyright 2014  <a href=""></a></p>
</div>
<div id="img">
<img src="http://upload.wikimedia.org/wikipedia/commons/e/e7/Flaming_cocktails.jpg">
</div>
</body>
</html>
Here is my css:
html,body
{
height:100%;
}
body
{
font-family: 'Open Sans Condensed', sans-serif;
}
h1
{
font-size:30px;
}
#img
{
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#img img
{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
#center
{
position:relative;
z-index:10;
top:0;
min-height:1000px;
background:white;
width:960px;
margin-right:auto;
margin-left:auto;
min-height:1000px;
padding:20px;
}
#header
{
position:relative;
z-index:20;
color:white;
position:fixed;
top:0;
width:1700px;
margin-right:auto;
margin-left:-10px;
background:silver;
opacity:0.7;
}
#wrapper
{
width:960px;
margin-right:auto;
margin-left:auto;
}
#header li
{
display:inline;
padding-right:20px;
}
.logo
{
font-family: 'Lobster', cursive;
font-size:30px;
color:blue;
}
/*content*/
#content
{
padding-top:80px;
width:500px;
}
.floatLeft
{
float:left;
margin: 4px;
}
.floatRight
{
float: right;
margin: 4px;
}
#content img
{
width:100px;
height:100px;
padding:20px;
}
.width
{
width:250px;
padding:10px 30px;
}
#sidebar
{
margin-top:50px;
float:right;
min-height:1500px;
text-align:center;
}
#sidebar img
{
width:150px;
height:150px;
}
#sidebar li
{
list-style:none;
padding:10px;
}
#content-right
{
padding-top:80px;
width:450px;
float:right;
}
#content-right img
{
width:100px;
height:100px;
padding:20px;
}
Here is my javascript:
var images = ['http://acdutyfree.com/images/Page95_LiquorAndTobacco_BombaySapphire_DistilledLondonDryGin_800x800.jpg', 'http://images.china.cn/attachement/jpg/site1007/20130621/0013729929f1132dee4303.jpg', ];
$('#header').css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'});
$('<img src="http://acdutyfree.com/images/Page95_LiquorAndTobacco_BombaySapphire_DistilledLondonDryGin_800x800.jpg' + images[Math.floor(Math.random() * images.length)] + '">').appendTo('#img');
LINK it was working with your logic , just add jquery in fiddle and increase the number of images and removed the unwanted just to check.
Math.random()
between 1 and 0, will have less probability to act like random since we have only two values
You can use this... Works Perfectly fine. Just made it up :)
This one is without jQuery. No need to load the heavy script in your page :)
//You can increase the images by adding more links to the array
var array = ['http://acdutyfree.com/images/Page95_LiquorAndTobacco_BombaySapphire_DistilledLondonDryGin_800x800.jpg','http://images.china.cn/attachement/jpg/site1007/20130621/0013729929f1132dee4303.jpg'];
function shuffle(array) {
var currentIndex = array.length;
var temporaryValue;
var randomIndex;
while (0 !== currentIndex) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
var shuffled_images = shuffle(array);
var yourbackground = document.getElementById('img');
yourbackground.style.backgroundImage = 'url(' + shuffled_images[0] + ')' ;
Check out this tutorial: http://briancray.com/2009/12/28/simple-image-randomizer-jquery/
Start with an array of images. Change the image filenames in the array to the actual filenames. Don't include the directory—filenames only.
<i>This is not italic</i>, and [this is not a link](http://example.com)var images = ['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg'];
Set a random background with jQuery and CSS background-image
$('#body').css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'});
Try Using : Here ,you have to use,
Math.random()
with in Math.round()
because, Math.round()
figures your returning value to 0 and 1,so if you have only two images then Math.round()
performed them well,and may not repeat any background more then once.
var images = ['http://acdutyfree.com/images/Page95_LiquorAndTobacco_BombaySapphire_DistilledLondonDryGin_800x800.jpg', 'http://images.china.cn/attachement/jpg/site1007/20130621/0013729929f1132dee4303.jpg', ];
var random = Math.round((Math.random()*images.length))
$('#background').css({'background-image':images[random]})
Try to bind 'beforeunload':
$(window).bind('beforeunload',function(){
/* change background */
});
How can you do this reading image from array of images?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.