I have an element with a background image, is it possible to change that background image to a random image URL that I have?
So when a user loads the page, a random background image will be show.
Update
Thanks everyone who answered my question, you're all awesome!
I have an element with a background image, is it possible to change that background image to a random image URL that I have?
So when a user loads the page, a random background image will be show.
Update
Thanks everyone who answered my question, you're all awesome!
Share Improve this question edited Jun 20, 2020 at 9:12 CommunityBot 11 silver badge asked May 19, 2012 at 10:58 user1401379user1401379 8- One more variant: jsfiddle/EyKZZ – VisioN Commented May 19, 2012 at 11:06
- @VisioN After changing the background images on the JSFiddle, it's no longer working. Why's that?! – user1401379 Commented May 19, 2012 at 11:28
- It should work by all means. Possibly it shows image randomized in the previous run. – VisioN Commented May 19, 2012 at 11:39
- @VisioN It works now although the background image is repeated. I'm looking to make the background image stretched the whole width and height. I have body { width: 100%; height: 100%; } although the background image is repeat. – user1401379 Commented May 19, 2012 at 11:58
- 1 @Grezzo, possible in CSS3. Thanks, I also enjoy cats :) – VisioN Commented May 19, 2012 at 17:51
6 Answers
Reset to default 2Yes. Here is an example:
$(document).ready(function() {
$("body").css("background-image", "url("+your_random_image_url+")");
});
Name you image files as "image1.jpg" "image2.jpg" and so on. Generate a random number
Math.floor(Math.random()*range_of_your_image_nums+1);
Then use this number to load your random image as
$("#id_of_your_element").css("background","<url>");
Here is the Sample Script that does it, below is the way I do it. Tested with IE 6 and Firefox (2 and 3). The background image is fixed on the right site and will not scroll.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function changeImg(imgNumber) {
var myImages = ["images/image0.jpg", "images/image1.jpg", "images/image2.jpg", "images/image3.jpg"];
var imgShown = document.body.style.backgroundImage;
var newImgNumber =Math.floor(Math.random()*myImages.length);
document.body.style.backgroundImage = 'url('+myImages[newImgNumber]+')';
}
window.onload=changeImg;
</script>
<style type="text/css">
.bg {background-attachment:fixed; background-repeat: no-repeat; background-position:top right;}
</style>
</head>
<body class="bg">
<p>Some text</p>
<!-- put a lot text lines here to see that the background stays fixed. -->
<p>Some text</p>
</body>
</html>
Keep an array with all your backgrounds, and load a random one at $(document).ready()
$(document).ready(function() {
var backgrounds = ['link1', ..., 'linkN'];
$("#yourElementId").css("background-image: url("+backgrounds[Math.round(Math.random() * (backgrounds.length - 1))] +")");
});
var backgrounds = ['',
'bg3.jpg',
'bg1.jpg',
'bg1013.jpg',
'bg123.gif',
'bg553.jpg',
'bg663.png',
'bgdaas3.jpg',
'bgdw3.jpg',
'bgdd3.jpg',
'dasd.png'
];
$('#elementID').css('background', 'url('+backgrounds[Math.random()*10]+')');
$(document).ready(function() {
var images = ["the-nude-art.jpg", "the-secret-pic.jpg","topless-pic.png","oolala-pic.jpg"];
var rand_image = images[Math.floor(Math.random() * images.length)];
var my_site_image_folder_path = 'http://www.xyz./images/';
$('body').css('background-image', 'url("' + my_site_image_folder_path + rand_image + '")');
});