Mike Street
  1. Home
  2. Blog
  3. Get background image information if element has a one in jQuery

Get background image information if element has a one in jQuery

Posted on 4th March 2016 (updated on 9th April 2016)

Recently I need to loop through elements on a page and, if the element had a background image apply a jQuery plugin. The plugin required the background image path & dimensions to function - however becuase each image differed in size, it needed to be done programatically.

There fundamentals of the code are pure JS, so jQuery isn't needed

// Find each object and loop through one by one
$('div').each(function(index, el) {
    // Cache the object
    var self = $(this);
    // Get the background-image
    var background = self.css('background-image');
    // If the background image is anything other than "none"
    if(background != 'none') {
        // Find and replace "url()" to get the pure image URL
        background = background.replace('url("','').replace('")','');
        // Create new Image instance and set path to our background
        var bg = new Image;
        bg.src = background;
        // We now have serveral vars availible to pass through to the plugin
        // self = the element
        // background = the url
        // bg.width = image width
        // bg.height = image height
    }
});

The code above gets the background image and, if it exists, get the width and height of the image as a variable which can then be passed through to wherever you need!

Web Javascript

You might also enjoy

Mike Street

Written by Mike Street

Mike is a front-end developer from Brighton, UK. He spends his time writing, cycling and coding. You can find Mike on Twitter.