title: How do I dynamically change the gradient of a div with jQuery
body: <p>I have a div with a gradient that I want the user to be able to change dynamically. The div style is:</p>
  
  <pre><code>&lt;div id="colourGradientDiv" style="background: &lt;?php echo $colour_start; ?&gt;; background: -moz-linear-gradient(top,  &lt;?php echo $colour_start; ?&gt; 0%, &lt;?php echo $colour_end; ?&gt; 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,&lt;?php echo $colour_start; ?&gt;), color-stop(100%,&lt;?php echo $colour_end; ?&gt;)); background: -webkit-linear-gradient(top,  &lt;?php echo $colour_start; ?&gt; 0%,&lt;?php echo $colour_end; ?&gt; 100%); background: -o-linear-gradient(top,  &lt;?php echo $colour_start; ?&gt; 0%,&lt;?php echo $colour_end; ?&gt; 100%); background: -ms-linear-gradient(top,  &lt;?php echo $colour_start; ?&gt; 0%,&lt;?php echo $colour_end; ?&gt; 100%); background: linear-gradient(to bottom,  &lt;?php echo $colour_start; ?&gt; 0%,&lt;?php echo $colour_end; ?&gt; 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='&lt;?php echo $colour_start; ?&gt;', endColorstr='&lt;?php echo $colour_end; ?&gt;',GradientType=0 );"&gt;
  </code></pre>
  
  <p>I am using Ajax to change the colour with the following code:</p>
  
  <pre><code>$("#colourGradientDiv").css({"background" : colour_start,
   "background" : "-webkit-gradient(linear, left top, left bottom, color-stop(0%, "+colour_start+"), color-stop(100%, "+colour_end+"))",
   "background" : "-webkit-linear-gradient(top, "+colour_start+" 0%, "+colour_end+" 100%)",
   "background" : "-o-linear-gradient(top, "+colour_start+" 0%, "+colour_end+" 100%)"
   "background" : "-ms-linear-gradient(top, "+colour_start+" 0%, "+colour_end+" 100%)",
   "background" : "linear-gradient(to bottom, "+colour_start+" 0%, "+colour_end+" 100%)",
   "filter" : "progid:DXImageTransform.Microsoft.gradient( startColorstr='"+colour_start+"', endColorstr='"+colour_end+"',GradientType=0 )"
  });
  </code></pre>
  
  <p>The above code doesn't chagne the div at all. However, if I just set the first "background" property then I change the whole colour of the div so I know that I'm addressing the div correctly and that the variable colour_start is correct.</p>
  
  <p>Anyone know how to do this?</p>