jQuery Plugin For Fullscreen Background Image - Backgroundcover
File Size: | 325 KB |
---|---|
Views Total: | 1133 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Backgroundcover is a jQuery based CSS3 background-size:cover
polyfill/shim that scales the background image as large as possible to cover the background area.
How to use it:
1. Create an empty container for the fullscreen background image.
<div id="background" class="background-image"></div>
2. The CSS to set the background image and its position.
.background-image { float: left; -moz-background-size: cover; -webkit-background-size: cover; background-size: cover; height: 100%; width: 100%; } #background { background-image: url('landscape.jpg'); background-position: center center; background-repeat: no-repeat; }
3. Include the jQuery library and jQuery Backgroundcover plugin in the page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="src/backgroundcover.js"></script>
4. Call the plugin with options.
<scrip> $('#background').backgroundcover({ // specify a position value which will override values found by // the actuall backgound positioning `(left|center|right, top|center|bottom)`. x: { left: '0', center: '50', right: '100' }, y: { top: '0', center: '50', bottom: '100' } }); </script>
This awesome jQuery plugin is developed by iwyg. For more Advanced Usages, please check the demo page or visit the official website.