According to what I've seen in internet I should be able to change a background-image of a div everytime the page refresh with this javascript script. It's not working for some reason. Any help will be appreciated.
This the html
<div class="home-intro show-for-medium-up" id="home-intro">
</div>
This is the css
.home-intro{
background-image: url("../images/1.png");
background-color:grey;
height:500px;
color:$white;
text-align:center;
}
This is the js
<script>
function randomImage(){
var images = [
'../images/1.png',
'../images/2.png',
'../images/3.png'];
var size = images.length;
var x = Math.floor(size * Math.random());
console.log(x);
var element = document.getElementsByClassName('home-intro');
console.log(element);
element[0].style["background-image"] = "url("+ images[x] + ") no-repeat;";
}
document.addEventListener("DOMContentLoaded", randomImage);
According to what I've seen in internet I should be able to change a background-image of a div everytime the page refresh with this javascript script. It's not working for some reason. Any help will be appreciated.
This the html
<div class="home-intro show-for-medium-up" id="home-intro">
</div>
This is the css
.home-intro{
background-image: url("../images/1.png");
background-color:grey;
height:500px;
color:$white;
text-align:center;
}
This is the js
<script>
function randomImage(){
var images = [
'../images/1.png',
'../images/2.png',
'../images/3.png'];
var size = images.length;
var x = Math.floor(size * Math.random());
console.log(x);
var element = document.getElementsByClassName('home-intro');
console.log(element);
element[0].style["background-image"] = "url("+ images[x] + ") no-repeat;";
}
document.addEventListener("DOMContentLoaded", randomImage);
- Probably missing quotation marks inside generated url string – Amit Commented Jul 7, 2015 at 19:40
-
According to the example you gave, there is
1/3probability that the image don't change, as you are relying on random(). You can better have a cookie likedocument.cookie="lastimg=1";if you have just shown 1st image. Now on page load, omit that option, and use random(). – skbly7 Commented Jul 7, 2015 at 19:47 -
Adding the background-repeat property (ie. no-repeat) is not valid for background-image. Try
"url("+ images[x] + ");"or alternatively usestyle["background"]. – Joe Conlin Commented Jul 7, 2015 at 19:48 -
In your css file,
color:$white;probably isn't helping – the_pete Commented Jul 7, 2015 at 20:08
3 Answers
Reset to default 4The only issue is that you are trying to set the no-repeat attribute of the background-image property. no-repeat is an attribute of the background property.
http://codepen.io/kevinfargason/pen/EjEeMa
I would just do
<body onload="randomImage()">`
and use
var x=Math.floor(size * Math.random());
in
document.getElementById("home-intro").style.backgroundImage = "../images/" + x + ".png";
EDIT:
Or jQuery
$(function(){
var x=Math.floor(size * Math.random());
$('#home-intro').css('backgroundImage', '../images/' + x + '.png');
});
You need to add the height to the style.
function randomImage(){
var images = ["./hanuman.png","./jesus.jpg","./hanuman.png"];
var size = images.length;
var x = Math.floor(size * Math.random());
console.log(x);
document.getElementById("homeintro").style.height="1000px";
document.getElementById("homeintro").style.backgroundImage =
"url("+images[x] +")";
}