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

File Size: 6.91 KB
Views Total: 386
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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(",woman");

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

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

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

   * Get width

   * Get height

   * Get src

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