Issue #3125Opened November 9, 2020by fq-selbach0 reactions

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

Question

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/

Answers (2)

johnkeel-thorkDecember 23, 20210 reactions

Was about to report the same problem.

Added Image as background:

<img width="847" alt="Screenshot 2021-12-23 at 12 06 51" src="https://user-images.githubusercontent.com/26764290/147238562-8df3ea2a-aca7-4b08-9d64-73fd1495d699.png">

Its being converted to liner-gradient instead of url:

<img width="621" alt="Screenshot 2021-12-23 at 12 07 36" src="https://user-images.githubusercontent.com/26764290/147238651-8c475b7d-4c6a-4b04-b2f7-dbd9f24347ae.png">
artfJuly 26, 20230 reactions

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

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.