css_images.html

<h1> Drag the following bookmarklet to your bookmarks bar </h1>
<h2>
    <a id="bookmarklet" href="#">CSS Images</a>
    - displays images referenced in CSS files
</h2>
Note: Does not work if CSS files are loaded from another domain.
Note: jQuery must be available.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
    function o() {
        // 2013 byterider
        $("body").html("<table/>");
        var count = 1, i = 0, j = 0, urls = [], url, sheet, rule, img, cell1, cell2, $table = $("table");
        $table.css({"font-size": "13px", "background": "#999", "color":"#eee"});
        while (sheet = document.styleSheets[i]) {
            if (window.console) console.log(sheet.href);
            while (sheet.cssRules && (rule = sheet.cssRules[j])) {
                // when trying to read a stylesheet loaded from a different domain, you get no cssRules
                if (rule.style && rule.style.cssText) {
                    var m = rule.style.cssText.match(/url\((.*?)\)/);
                    if (m) {
                        url = m[1].replace(location.origin, ""); // make server relative
                        if (!urls[url]) {
                            if (window.console) console.log(url);
                            urls[url] = 1;
                            img = $("<img/>")
                                .attr("src", url)
                                .attr("title", url)
                                .css({"border": "1px dotted #333", "max-width": "80%", "display": "block", "margin": "5px"});
                            cell1 = $("<td/>").append(count);
                            cell2 = $("<td/>").append(img);
                            row = $("<tr/>").append(cell1).append(cell2);
                            $table.append(row);
                            count += 1;
                        }
                    }
                }
                j += 1;
            }
            i += 1;
        }
    }
    var f = "" + window.o;
    document.getElementById("bookmarklet").href =
        "javascript:" + f.slice(f.indexOf("{") + 1, f.lastIndexOf("}"))
        .replace(/\/\/.*/g, "") // remove comments
        .replace(/\s+/g, " "); // remove line breaks
</script>