jQuery to change colors/background color dynamically on change

Question

I can't get the following code to work. Any idea why?

The values are correct. I could test them using alert(field) but the background gradient does not work. I have no idea why.

            var myOptions = {
                change: function(event, ui){
                    button_text_color = $('#button_text_color').val();
                    button_border_color = $('#button_border_color').val();
                    button_bg_color = $('#button_bg_color').val();
                    button_bg_color2 = $('#button_bg_color2').val();
                    div_preview = $('.ajax-live-preview-custom');
                    div_preview.find('.wp-superlike-button').css({
                        'color': button_text_color,
                        'borderColor' : button_border_color,
                        'backgroundColor': button_bg_color,
                        'backgroundImage': '-webkit-gradient(linear, 0% 0%, 0% 100%, from(' + button_bg_color + '), to(' + button_bg_color2 + '))',
                        'backgroundImage': '-webkit-linear-gradient(top, ' + button_bg_color + ', ' + button_bg_color2 + ')', 
                        'backgroundImage': '-moz-linear-gradient(top, ' + button_bg_color + ', ' + button_bg_color2 + ')', 
                        'backgroundImage': '-ms-linear-gradient(top, ' + button_bg_color + ', ' + button_bg_color2 + ')', 
                        'backgroundImage': '-o-linear-gradient(top, ' + button_bg_color + ', ' + button_bg_color2 + ')'
                    });
                }
            };
            $('.my-color-field').wpColorPicker(myOptions);

Answer 1

I think issue is this:

'backgroundImage':

change to:

'background':

find out here: http://css-tricks.com/examples/CSS3Gradient/