Scrape background-image from URL with CSS stored in a separate stylesheet

How to?
#1

Describe the problem.
I'm attempting to scrape category pages and collect the image shown in the banner. The banner div is written as:
<div class="title-banner__right-image"></div>

In a separate stylesheet, the image is displayed with:
.title-banner__right { background-image: url(https://i.ebayimg.com/images/g/3GYAAOSwF3pfheiI/s-l1600.webp); }

I attempted to use an Element Attribute to pull this image, but style isn't working. I'm guessing that's because style isn't included in the HTML.

This didn't work:

  • Type: Element Attribute
  • Selector: div.title-banner__right-image
  • Attribute name: style

Is there another way I can scrape a background-image from a div?

Url: https://www.ebay.com/e/ad/hanes-champ-50off-evtm-q4

Sitemap:
{"_id":"image-test","startUrl":["https://www.ebay.com/e/ad/hanes-champ-50off-evtm-q4"],"selectors":[{"id":"banner-image","type":"SelectorElementAttribute","parentSelectors":["_root"],"selector":"div.title-banner__right-image","multiple":false,"extractAttribute":"style","delay":0}]}

#2

Interesting problem. This can be achieved with Type: HTML and a regex:

{"_id":"forum-ebay-bg-image","startUrl":["https://www.ebay.com/e/ad/hanes-champ-50off-evtm-q4"],"selectors":[{"id":"HTML from pagecontainer__top","type":"SelectorHTML","parentSelectors":["_root"],"selector":"div.pagecontainer__top","multiple":false,"regex":"(?<=background-image: url\\()[^\\)]+" }]}

1 Like
#3

That worked perfectly! Thanks for figuring out the regex for me too!