jQuery Plugin For Random Background Image - randomBackground

File Size: 7.26 MB
Views Total: 15821
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Random Background Image - randomBackground

randomBackground is a small jQuery plugin that change background image of you page/container randomly on page load or refresh.

See also:

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.