BUG: linear-gradient CSS does weird things to background-image

[fq-selbach]

Version: 0.16.27

Are you able to reproduce the bug from the demo?

[x] Yes [ ] No

What is the expected behavior?

When adding background-image via Style Manager it show as background-image: url(...);.

What is the current behavior?

Instead of background-image:url(https://grapesjs.com/docs/logo.png); you will get background-image:linear-gradient(https://grapesjs.com/docs/logo.png);.

Describe the bug detailed

When an element has a given class with background: linear-gradient(...) or background-image: linear-gradient(...); and you try to replace that by overwriting it with an background image selected via Style Manager it will end up as e.g. background-image:linear-gradient(https://grapesjs.com/docs/logo.png);.

Something else I noticed when playing with the (grapesJs) gradient plugin and some custom modifications is that properties of background that have linear-gradient as value will sometimes be parsed to multiple layers of broken images when seen by the Style Manager "Background" section. I think it tried to parse the background or background-image property but doesn't understand the content.

Are you able to attach screenshots, screencasts or a live demo?

[x] Yes (attach) [ ] No

Here is a JsFiddle. Just add the included image via "Background" section in style manager to one of the DIVs with gradient and check the generated CSS: https://jsfiddle.net/cqr7Luaj/

[johnkeel-thork]

Was about to report the same problem.

Added Image as background:

Its being converted to liner-gradient instead of url:

[artf]

Closing as from the same jsfiddle the issue seems to be solved