2015-05-13, 05:05 PM
here you go
1. Set the random background images in the CSS.
01
.randbg {
02
background: url('../images/1.jpg') no-repeat center center fixed;
03
-webkit-background-size: cover;
04
-moz-background-size: cover;
05
-o-background-size: cover;
06
background-size: cover;
07
}
08
.randbg.bg1 {
09
background-image: url('../images/1.jpg');
10
}
11
.randbg.bg2 {
12
background-image: url('../images/2.jpg');
13
}
14
.randbg.bg3 {
15
background-image: url('../images/3.jpg');
16
}
17
18
...
2. Add a class 'randbg' to your body tag.
1
<body class="randbg">
3. Load the jQuery javascript library and jQuery randomBackground plugin at the bottom of you html document.
1
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
2
<script src="js/rand.bg.js"></script>
4. Call the plugin with options. That's it.
1
<script>
2
$(".randbg").RandBG({
3
ClassPrefix: "bg",
4
count: 10
5
});
6
</script>
http://www.jqueryscript.net/other/jQuery-Plugin-For-Random-Background-Image-randomBackground.html