Control positioning of background image/pattern

Question

My end goal is to create an "arearange" chart that uses the sample background image below such that a given value on the y-axis (e.g. 56) is always represented by the same color/position from the image.

As you can see in the fiddle below, I am able to use highcharts to create an "arearange" chart which uses an arbitrary image to fill/shade the area within the range. However, even though the two charts have different (y-axis) values, the colors are exactly the same; the peak in June on "Chart 1" is the same color as "Chart 2" even though their values are different (301 vs 401).

http://jsfiddle.net/malonso/YwuqD/1/

Code pertaining to the fill color/pattern:

    fillColor: {
        pattern: 'http://i.stack.imgur.com/dezhE.png',
        width: 10,
        height: 300
    }

Is it possible to somehow specify that the background image should cover a specific range on the y-axis?

Sample image:

UPDATE: For some reason the chart background is no longer showing up as a gradient when viewed in a browser other than chrome, so I have attached a screenshot of what the fiddle looks like:

Answer 1

When you render the charts use this:

/*********************************************************
* Generate the example chart
*********************************************************/

var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container'
    },

    title: {
        text: 'Chart 1'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    series: [{
        type: 'arearange',
        data: testData,
        fillColor: {
            pattern: 'http://i.stack.imgur.com/dezhE.png',
            width: 10,
            height: 300 + Math.round(testData[0][0] / 100) * 100
        }
    }]

});

var chart2 = new Highcharts.Chart({

    chart: {
        renderTo: 'container2'
    },

    title: {
        text: 'Chart 2'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    series: [{
        type: 'arearange',
        data: testData2,
        fillColor: {
            pattern: 'http://i.stack.imgur.com/dezhE.png',
            width: 10,
            height: 300 +  Math.round(testData2[0][0] / 100) * 100
        }
    }]

});

It adds the Y axis's starting point (Math.round(testData[0][0] / 100) * 100) to the height of the image.

(There is only a minor change to the code you supplied)

The difference is kinda subtle