Random background images CSS3

后端未结

关注

 6  448

I am doing small website, however I have like 5-6 images for my background, and I want to make it random every time I refresh the page. This is what I got in style.css :

相关标签:

6条回答

醉梦人生

2020-12-10 08:01

For jQuery:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {

    var bgArray = ['bg1.jpg', 'bg2.jpg', 'bg3.jpg'];
    var bg = bgArray[Math.floor(Math.random() * bgArray.length)];

    $('body').css('background', bg);

    // If you have defined a path for the images
    var path = 'images/bg/';

    // then you can put it right before the variable 'bg'
    $('body').css('background', path+bg);

}); 
</script>

0 讨论(0)

轮回少年

2020-12-10 08:06

You cant use only html & css for this purpose. You should do it client side(like with javascript) or server side(like a php script)

Here's php example:

<?php
  $bg = array('bg-01.jpg', 'bg-02.jpg', 'bg-03.jpg', 'bg-04.jpg', 'bg-05.jpg', 'bg-06.jpg', 'bg-07.jpg' ); // array of filenames

  $i = rand(0, count($bg)-1); // generate random number size of the array
  $selectedBg = "$bg[$i]"; // set variable equal to which random filename was chosen
?>

<style type="text/css">
<!--
body{
background: url(images/<?php echo $selectedBg; ?>) no-repeat;
}
-->
</style>

Here's jquery example:

var images = ['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg'];
$('html').css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'});

0 讨论(0)

长情又很酷

2020-12-10 08:08
Really short option: (if you can use php in the page). Substitute the urls of your backgrounds for the filenames that are in single quotes.
```
background: url('<?php $a = array('darkred.jpg','red.gif','pink.png'); echo $a[array_rand($a)];?>');
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
灰色年华

2020-12-10 08:09

This is not possible using pure CSS. You must to use javascript to random and set the background image of your website.

0 讨论(0)
发布评论:

提交评论
- 加载中...

梦毁少年i

2020-12-10 08:15

I would use JS. Take a look at this example:

<html>
<head>
<script type="text/javascript"> 
var totalCount = 8;
function ChangeIt() 
{
var num = Math.ceil( Math.random() * totalCount );
document.body.background = 'bgimages/'+num+'.jpg';
document.body.style.backgroundRepeat = "repeat";// Background repeat
}
</script>
</head>
<body> 
// Page Design 
</body> 
<script type="text/javascript"> 
ChangeIt();
</script> 
</html>

You would need to name your images the proper numbers through the random count and place them in that images folder.

0 讨论(0)

迷失自我

2020-12-10 08:18
Well, the last answer is very short, but how if you put them in one folder?
```
<?php
$pt = 'BGs/';  //folder where you put your BGs       
$bg = array($pt.'bg_ants.png', $pt.'bg_boobs.png', $pt.'bg_circles.png' ); // array of filenames
?>
<Body background="<?php echo $bg[array_rand($bg)]; ?>">
```
You can save it in one file and include it to use the code at your other pages. For example: you save it as "rand.htm". Just replace the <body> tag with this code.
```
<?php include("rand.htm"); ?>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...