How can I use jQuery to detect every background image on a web page?

Is it possible to use jQuery to find all the background images on a page? My original plan was to loop through every element using:

jQuery("*").each(function() { ... });

and then check whether each element had a property set for .css("background-image")

However this doesn't seem to work. jQuery("*") doesn't seem very performant.

Is there a better way?

Solution

This works for me:

   <div style="background-image:url('image1.jpg')">
        <div style="background-image:url('image2.jpg')">
        </div>
   </div>

and the jquery:

   $('*').each(function(i, item) {
       console.log($(item).css('background-image'));
   });

The console log outputs image1.jpg and image2.jpg, respectively.

And no, using the * selector is very, very slow. It literally checks everything (even inline elements that are very, very unlikely to have background images. You would be better off selecting individual tag types (like divs) or searching by class or id. Those will be much more efficient than the * selector.

Good luck.