I have WordPress page whose theme seems to be loading an undesirable CSS background-image. I want to try to locate the code that is responsible for loading this image but first I have to find its name. I was wondering if there is some tool that allows coders to list and identify the urls of all css-background images that a page calls.
Obviously finding background-images is trivial if all of the page's CSS is controlled only by inline code and directly linked CSS-stylesheets: a text search "find" operation for "background-image" will allow you to find all bg images. But the task becomes complicated if styling is js dependent, and in this case, it was at times.
For those of you who immediately wonder why I need would want to go this route instead of simply using development tools in Chrome or Firefox, below is a list of reasons why.
Why I want a way to automatically extract the background-image urls:
- The unwanted ghost images only loads on my mobile phone, so I can't inspect the element to find the image in using my desktop development environment. This is true even if I set the developer tools to "mobile".
- I don't have a development environment for my phone that will let me inspect the relevant element.
- I tried downloading the exact html loaded by the mobile phone in my browser, but the css ghost image will not appear on my desktop even when use the code my phone had loaded.
- The ghost image is not from a virus in my mobile phone browser, because the ghost image loads on my phone even when I used a different browser.
Any help will be greatly appreciated!
UPDATE: I figured out the cause of the ghost image using the free trial provided by Browserstack, a mobile emulator. At allows you to view interactive content and inspect it with dev tools. I learned about it from this question: test mobile website in desktop browser.
My problem turned out to be that the css-image in the theme was pointing to my local address, which different from what it should have been on my remote server. The issue turned out not to be a desktop vs. mobile problem, but rather local vs. remote. The emulator reproduced my issue, and it allowed me to inspect and find the problematic code. Still I would love to know if there is a such a css-crawling tool, so I will leave this question open.