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

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.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/dist/jquery-bg-image.min.js"></script>

2. Add a background image to your webpage or a specific container.

<div id="bg-image"></div>

#bg-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center top;
  background-image: url("https://source.unsplash.com/2220x1443/?girl,woman");
}

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

$("#bg-image").bgImage(function (event) {
  /**
   * Event Log
   */
  console.log(event);

  /**
   * Get Object
   * @type {*|jQuery}
   */
  var background_image = $(this).get(0);

  /**
   * Get width
   */
  $(".width").find("span").text(
    background_image.width
  );

  /**
   * Get height
   */
  $(".height").find("span").text(
    background_image.height
  );

  /**
   * Get src
   */
  $(".src").find("span").text(
     background_image.src
  );
});

---

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