Button Background color overridden by background-image: linear-gradient. (Chrome/FF)

[Zach]

The background-color of k-button classed elements cannot be set in recent versions of Chrome or Firefox due to the application of the background-color:linear-gradient style. This issue can be observed on the theme builder site:

http://demos.kendoui.com/themebuilder/web.html

Using Chrome or Firefox:

1.) Select the Uniform Theme.
2.) Click Start the Kendo UI Themebuilder.
3.) In the themebuilder pop-up, choose Buttons and select a new Background color.

Result: The Background color is not applied.

Disabling all background-image styles still enables the selected color to display.

[Dimo]

Hello Zach,

Linear gradient styles behave as background image styles - a background color is displayed only where there is no background image, but normally, linear gradients span over the whole element, that's why the background color is not seen anywhere.

Removing the linear gradient is the way to go in such cases. If you want to use a flexible gradient background, you can use a combination of a background color and semi-transparent gray image highlight.png, which is part of the ready-to-use Kendo UI themes (textures folder).

Regards,
Dimo
Telerik

[Zach]

Thanks Dimo. This makes sense. It would be nice to see an update for the theme builder which takes this issue into account and overrides the background-image. As is, the theme builder is offering a customization for the Button background color which does not work as expected.

[Dimo]

Hello Zach, 

I agree. In general, the solution to this problem is not that straightforward, as it looks, but we will look into it.

Regards,
Dimo
Telerik