Get background image information if element has a one in jQuery
By Mike Street
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!