title: Background image isn't appearing in Highcharts
body: <p>Basically, this is a huge web-service based web application where hundreds of graphs can be displayed. I have just got involved in the project and need to implement a graph legend onto these dynamically generated graphs.</p>
  
  <p>I know my image is loaded because when I enter an incorrect/random path I get the error:</p>
  
  <p><img src="https://i.stack.imgur.com/faZgk.png" alt="enter image description here"></p>
  
  <p>Currently, the text from the CSS displays but images cannot be entered in it's place because it only seems to allow one set of tags. I have already tried placing it as img in the display as well as changing Z-indexes and positions but it just doesn't show anything, except for the text. </p>
  
  <p><img src="https://i.stack.imgur.com/VqPIE.png" alt="enter image description here"></p>
  
  <p>Here is the relevant CSS (I've already tried using <code>background</code> instead of <code>backgroundImage</code> btw):</p>
  
  <pre><code>credits: {
      enabled: true,
      text: 'Highcharts.com',
      href: 'http://www.highcharts.com',
      position: {
          align: 'right',
          x: -10,
          verticalAlign: 'bottom',
          y: -5
      },
      style: {
          cursor: 'pointer',
          color: '#909090',
          fontSize: '10px',
          backgroundImage: 'url("/image/example")'
      }   
  }
  </code></pre>
  
  <p>and the potentially relevant JavaScript:</p>
  
  <pre><code>if (credits.enabled &amp;&amp; !chart.credits) {
          creditsHref = credits.href;
      chart.credits = renderer.text(
          credits.text,
          0,
      0
      )
      .on('click', function () {
          if (creditsHref) {
              location.href = creditsHref;
          }
      })
      .attr({
          align: credits.position.align,
          zIndex: 8
      })
      .css(credits.style)
      .add()
      .align(credits.position);
  }
  </code></pre>