title: How to override HTML image using CSS
body: <p>I have my current code:</p>
  
  <pre><code>#content img[src="/img/test.gif"] { 
      background-image:url(dark-img.png) !important;
  }
  </code></pre>
  
  <p>From my understanding <code>!important;</code> overrides existing values?</p>
  
  <p>Why isn't this overriding the current HTML image in place there? The background shows up, <strong>behind</strong> the HTML image.</p>
  
  <p>I want it <strong>in front</strong> of the HTML image, is this possible using CSS or JS?</p>
  
  <p>Edit: For what its worth, im making a userscript that will modify the existing style of the site. So I do not have direct access to the HTML image.</p>