jQuery Plugin For Random Background Image - randomBackground
| File Size: | 7.26 MB |
|---|---|
| Views Total: | 15850 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
randomBackground is a small jQuery plugin that change background image of you page/container randomly on page load or refresh.
See also:
- jQuery Plugin for Random Noise Background - Noisy
- jQuery Plugin For Dynamic Random Background Color & Image - Bgran
How to use it:
1. Set the random background images in the CSS.
.randbg {
background: url('../images/1.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.randbg.bg1 {
background-image: url('../images/1.jpg');
}
.randbg.bg2 {
background-image: url('../images/2.jpg');
}
.randbg.bg3 {
background-image: url('../images/3.jpg');
}
...
2. Add a class 'randbg' to your body tag.
<body class="randbg">
3. Load the jQuery javascript library and jQuery randomBackground plugin at the bottom of you html document.
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="js/rand.bg.js"></script>
4. Call the plugin with options. That's it.
<script>
$(".randbg").RandBG({
ClassPrefix: "bg",
count: 10
});
</script>
This awesome jQuery plugin is developed by masudafsar. For more Advanced Usages, please check the demo page or visit the official website.
