information background image - Download Get Information About The Background Image - bg-image.js

Download Get Information About The Background Image – bg-image.js

Posted on

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.

information background image - Download Get Information About The Background Image - bg-image.js
File Size: 6.91 KB
Views Total: 272
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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>
1 #bg-image {
2   width: 100%;
3   height: 100%;
4   background-size: cover;
5   background-position: center top;
6   background-image: url("https://source.unsplash.com/2220x1443/?girl,woman");
7 }

3. Call the function on the container and output the information about the background image.

01 $("#bg-image").bgImage(function (event) {
02   /**
03    * Event Log
04    */
05   console.log(event);
06  
07   /**
08    * Get Object
09    * @type {*|jQuery}
10    */
11   var background_image = $(this).get(0);
12  
13   /**
14    * Get width
15    */
16   $(".width").find("span").text(
17     background_image.width
18   );
19  
20   /**
21    * Get height
22    */
23   $(".height").find("span").text(
24     background_image.height
25   );
26  
27   /**
28    * Get src
29    */
30   $(".src").find("span").text(
31      background_image.src
32   );
33 });

This awesome jQuery plugin is developed by godoyrw. For more Advanced Usages, please check the demo page or visit the official website.

source : jquery.net