title: Highcharts Speedometer add image background
body: <p>I am trying to add a background image to my speedometer made with Highcharts but seems like I cannot achieve this.</p>
  
  <p>This is my function:</p>
  
  <p>jQuery(function() {</p>
  
  <pre><code>jQuery('#speedometer').highcharts({
      chart: {
          type: 'gauge',
          backgroundColor: 'rgba(255, 255, 255, 0.1)',
          height: 200,
          plotBackgroundColor: null,
          plotBackgroundImage: 'http://www.psdgraphics.com/file/colorful-triangles-background.jpg',
          plotBorderWidth: 0,
          plotShadow: false
      },
      title: {
          text: 'NUMERO DI TWEET'
      },
      exporting: {enabled: false},
      credits: {
          enabled: false
      },
      pane: {
          startAngle: -90,
          endAngle: 90,
          center: ['50%', '98%'],
          size: 250,
          background: [{
                  backgroundColor: 'rgba(255, 255, 255, 0.1)',
                  borderWidth: 0,
                  outerRadius: '0%',
                  innerRadius: '100%'
              }]
      },
      plotOptions: {
          gauge: {
              dataLabels: {
                  enabled: false
              },
              dial: {
                  radius: '90%',
                  backgroundColor: '#FFF',
                  topWidth: 1,
                  baseWidth: 8,
                  rearLength: '-4%'
              },
              pivot: {
                  radius: 7,
                  borderWidth: 7,
                  borderColor: 'white',
                  backgroundColor: 'transparent'
              }
          }
      },
      // the value axis
      yAxis: {
          min: 0,
          max: 100,
          minorTickInterval: 'auto',
          minorTickWidth: 0,
          minorTickLength: 0,
          minorTickPosition: 'outside',
          minorTickColor: '#767775',
          tickPixelInterval: 80,
          tickWidth: 1,
          tickPosition: 'outside',
          tickLength: 10,
          tickColor: '#767775',
          labels: {
              step: 1,
              rotation: 'auto',
              distance: 10
          },
      },
      series: [{
              name: 'Numero di Tweet',
              data: [80],
              color: '#fff',
          }]
  
  },
  // Add some life
  function(chart) {
      if (!chart.renderer.forExport) {
          setInterval(function() {
              var point = chart.series[0].points[0],
                      newVal,
                      inc = Math.round((Math.random() - 0.5) * 20);
  
              newVal = point.y + inc;
              if (newVal &lt; 0 || newVal &gt; 200) {
                  newVal = point.y - inc;
              }
  
              point.update(newVal);
  
          }, 3000);
      }
  });
  </code></pre>
  
  <p>});</p>
  
  <p>The image below shows what I want to achieve</p>
  
  <p><img src="https://i.stack.imgur.com/40wZ4.png" alt="enter image description here"></p>
  
  <p>Is there a way to add a backrgound image like that or doing the same with CSS3 gradients?
  Thanks for any help!</p>