CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Joe O'Toole
Joe O'Toole

Reputation: 21

Trying to change a background image on page refresh, running into problems

To begin, here is the page.

I've attempted the Javascript code without success, so I will try to explain my current setup.

my body has an ID of #homepage. This is the only page I will need this code for, so I've assigned that ID. The following is the CSS to access the image and cover the page:

body#homepage {
    background-attachment: fixed;
    background-image: url(../images/bg/4.jpg);
    background-repeat: no-repeat;
    background-position: center bottom; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

There are 4 images in the "../images/bg" folder, numbered 1 through 4. I simply want the images to change between the 4 upon page load, but I need to keep the images styled as they are in the current CSS.

Since I am only vaguely familiar with Javascript, I believe I'm getting something very simple wrong in the Javascript. I would appreciate someone spelling this out for me in specific detail. Thanks so much!

Upvotes: 2

Views: 654

Answers (4)

zur4ik
zur4ik

Reputation: 6254

First you need to get random number from 1 to 4.

I'll show you pure JavaScript and jQuery ways to do it:

JavaSript way:

//get random number from 1 to 4 and assign '.jpg' - or other format you need
var randomImage = "..\/images\/bg\/" + Math.floor((Math.random()*4)+1) + '.jpg';

//get body by ID
var homePageBody = document.getElementById('homepage');

//asign random image to body
homePageBody.style.backgroundImage=randomImage;

jQuery way:

$(document).ready(function () {
    var randomImage = '../images/bg/' + randomFromTo(1, 4) + '.jpg';

    //set background to body #homepage
    $('#homepage').css("background-image", randomImage)
});

//define randomizer function
function randomFromTo(rfrom, rto) {
    return Math.random() * (rfrom - rto) + rfrom;
}

Upvotes: 0

ryan j
ryan j

Reputation: 310

document.getElementById('homepage').style.backgroundImage = 'url(/whatever/img' + Math.floor( Math.random()*4 ) + '.png)';

Upvotes: 0

Vinay Pratap Singh Bhadauria
Vinay Pratap Singh Bhadauria

Reputation: 9947

with Jquery

$(document).ready(function(){
var num = getRandomArbitrary(1,4);
$('#homepage').css("background-image",'../images/bg/' + num + '.jpg')
});

function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}

Upvotes: 0

paka
paka

Reputation: 1641

try this

var randomImage = Math.floor((Math.random()*4)+1);
var homePage = document.getElementById('homepage');

homePage.style.backgroundImage='url("..\/images\/bg\/'+randomImage+'.jpg")';

Upvotes: 2

Related Questions