title: Extracting background-images from a web page / Parsing HTML+CSS
body: <p>I'm building a sharing site which allows to <strong>share webpage links</strong> with Ruby on Rails.</p>
  
  <p>I would like <strong>to extract some representative images</strong> for each page (as on <em>Facebook</em> when you share a link).</p>
  
  <p>For now I use the <a href="https://github.com/intridea/opengraph" rel="nofollow">gem opengraph</a> to parse <code>og:image</code> meta tag at first, and then I use <a href="http://nokogiri.org/" rel="nofollow">Nokogiri</a> to parse the page content and retrieve all <code>&lt;img&gt;</code> tags <code>src</code> attributes. This give good results (except some decoration images, so I filter results by size...). </p>
  
  <p>--</p>
  
  <p>Now I would like to go further and parse css <code>background-image</code> property : websites logo are often display as background for a <code>&lt;h1&gt;</code> or a <code>&lt;a&gt;</code> tag.</p>
  
  <p>I think about the following process:</p>
  
  <ul>
  <li><p>Parse HTML document with regex (something like <code>/background(-image)?:.../</code>) to find inline CSS</p></li>
  <li><p>Retrieve CSS stylesheets URLs with Nokogiri and parse these sheets with the same regex</p></li>
  </ul>
  
  <p>... and absolutify URLs according to documents URLs.</p>
  
  <p>--</p>
  
  <p><strong>My questions are :</strong></p>
  
  <ul>
  <li><p>Do you think there is a better alternative ?</p></li>
  <li><p>Is there a library of some sort that can increase the performance of the process ?</p>
  
  <p>For example, if I could build a consolidated view of HTML+CSS, which allows me to access CSS properties via the DOM, I could access <em>only</em> the background-images of pre-selected HTML elements (h1,a,...) and limit the number of results.</p></li>
  </ul>