This time I will share jQuery Plugin and tutorial about Get Information About The Background Image – bg-image.js, hope it will help you in programming stack.
bg-image.js is a super tiny jQuery plugin for developers that returns an object containing the information about your background image: width, height, and source.
How to use it:
1. To use this plugin, include the minified version of the bg-image.js plugin after jQuery.
1 |
< script src = "/path/to/cdn/jquery.slim.min.js" ></ script > |
2 |
< script src = "/dist/jquery-bg-image.min.js" ></ script > |
2. Add a background image to your webpage or a specific container.
1 |
< div id = "bg-image" ></ div > |
4 |
background- size : cover; |
5 |
background-position : center top ; |
3. Call the function on the container and output the information about the background image.
01 |
$( "#bg-image" ).bgImage( function (event) { |
11 |
var background_image = $( this ).get(0); |
16 |
$( ".width" ).find( "span" ).text( |
17 |
background_image.width |
23 |
$( ".height" ).find( "span" ).text( |
24 |
background_image.height |
30 |
$( ".src" ).find( "span" ).text( |
This awesome jQuery plugin is developed by godoyrw. For more Advanced Usages, please check the demo page or visit the official website.