How to Easily Find All Background Images on a Webpage Using Chrome DevTools (F12)

If you’re a beginner learning web development, you may often wonder:

“Which elements on this page are using background images?”

When websites use lots of CSS, page builders, or themes, it becomes hard to see where background images are coming from. Luckily, Chrome DevTools can show them instantly with a small script.

This guide will help you:

• Highlight all elements that use a CSS background image
• Display the file name of each background image
• Debug layouts more easily

---

Step 1: Open Chrome DevTools

Press:

• Ctrl + Shift + I (Windows)
• Cmd + Option + I (Mac)

Then switch to the Console tab.

---

Step 2: Paste This Script Into the Console

(function () {
  // remove old labels if re-running
  document.querySelectorAll('.bg-img-label').forEach(e => e.remove());

  const all = document.querySelectorAll('*');
  all.forEach(el => {
    const style = window.getComputedStyle(el);
    const bg = style.backgroundImage;

    if (bg && bg !== 'none' && bg.includes('url(')) {
      // highlight element
      el.style.outline = '2px solid red';

      // get file name
      let url = bg.slice(4, -1).replace(/"/g, '');
      let fileName = url.split('/').pop().split('?')[0];

      // create label
      const label = document.createElement('div');
      label.className = 'bg-img-label';
      label.innerText = fileName;
      label.style.position = 'absolute';
      label.style.background = 'yellow';
      label.style.color = 'black';
      label.style.fontSize = '12px';
      label.style.padding = '2px 4px';
      label.style.border = '1px solid black';
      label.style.zIndex = 999999;
      label.style.pointerEvents = 'none';

      // place label above element
      const rect = el.getBoundingClientRect();
      label.style.top = (window.scrollY + rect.top - 18) + 'px';
      label.style.left = (window.scrollX + rect.left) + 'px';

      document.body.appendChild(label);
    }
  });

  console.log("✔ Highlighted all background-image elements");
})();

What You Will See

• A red outline around every element that uses a background image
• A yellow label showing the image file name
• Instant visual identification of all background images on the page

---

Why This Trick Helps Beginners

If you’re new to CSS, it’s often confusing to find where background images are coming from — inline styles, theme files, page builders, or external CSS.

This simple DevTools trick:

• Saves time
• Improves debugging skills
• Helps you understand how layouts are built
• Makes CSS learning much easier