netdjw netdjw - 1 year ago 481
jQuery Question

Highcharts background image size option

I'm using Highcharts to render charts on webpage. Now I found an issue if I use

CSS option on container div:

<div id="container" style="min-width: 310px; max-width: 960px; height:400px;"></div>

I added a background image with this method:

Highcharts.theme = {
chart: {
backgroundColor: '#FFFFFF',
plotBackgroundImage: '/path/to/mybackgroundimage.png'

This image has 960px width and 400px height and it shows well on desktops, but if I check it on mobile devices the image's apect ratio has gone and the image become distorted.

Is there a
or something like this to fix the image position and size on different screen widths?

Answer Source

You can disable the plotBackgroundImage parameter and set the backgroundColor as transparent. Then apply the background img in CSS (for the container).


#container {
   background:url( 0% 0%;


chart: {
   backgroundColor: 'rgba(0,0,0,0)',
   type: 'line'

Example -

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download