Can anyone kindly give me a hand. I need a second pair of eyes. Im trying to print some css using js.
this.$el.find(".button").css({
'border': 'none',
'box-shadow': box_shadow,
'background-color': params.button_bg_color,
'background-image': 'linear-gradient(to bottom, ' + params.button_bg_color + ', ' + params.button_hvr_color + ')',
'background-image': '-webkit-gradient(linear, left top, left bottom, from(' + params.button_bg_color + '), to(' + params.button_hvr_color + '))',
'background-image': '-webkit-linear-gradient(top, ' + params.button_bg_color + ', ' + params.button_hvr_color + ')',
'background-image': '-moz-linear-gradient(top, ' + params.button_bg_color + ', ' + params.button_hvr_color + ')',
'background-image': '-webkit-linear-gradient(top, ' + params.button_bg_color + ', ' + params.button_hvr_color + ')',
'background-image': '-o-linear-gradient(top, ' + params.button_bg_color + ', ' + params.button_hvr_color + ')',
'background-image': 'ms-linear-gradient(to bottom, ' + params.button_bg_color + ', ' + params.button_hvr_color + ')',
});
The border, box-shadow, and background-color are printing. But none of the background-image. I know my var values are good, and I know I can inline the gradients. I have already eliminated those two. Any help would be greatly appreciated.
Cheers!
UPDATE
Very strangely, at least to me. If I remove these 2 this works...
'background-image': '-o-linear-gradient(top, ' + params.button_bg_color + ', ' + params.button_hvr_color + ')',
'background-image': 'ms-linear-gradient(to bottom, ' + params.button_bg_color + ', ' + params.button_hvr_color + ')',
Any thoughts on why this is this case. Im now extremely confused.