Linear-gradient CSS does weird things to background-image
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 2...
Read full answer below ↓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 (3)
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">Closing as from the same jsfiddle the issue seems to be solved
Thanks for reporting this, @fq-selbach.
The issue with linear-gradient CSS does weird things to background-image appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modifications overlap, creating an inconsistent state.
What to try:
- Add a setTimeout wrapper to ensure the DOM has settled:
setTimeout(() => {
// your operation here
}, 0);
-
Check initialization order — make sure components are fully loaded before you interact with them
-
Use the editor's event system — listen to completion events:
editor.on('component:mount', (component) => {
// safe to interact with component here
});
Recommended next steps:
- Test with the latest GrapesJS version if you haven't
- Provide a minimal reproducible example (CodeSandbox) — this helps the team identify the root cause faster
- Include GrapesJS version, browser, and console errors in your report
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3181
SelectorManager not return a String but an Object
Version:0.16.30 Are you able to reproduce the bug from the demo? [1 ] Yes What is the expected behavior?* SelectorManager.getState() is sup...
Issue #3613
Inconsistent Image Selection
Version: 0.17.19 Are you able to reproduce the bug from the demo?[X] Yes[ ] No Reproducible here. What is the expected behavior? Selecting...
Issue #5000
Localization works weird
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome 111 Reproducible demo link https://...
Issue #3618
style manager size not setting to image control
WARNING READ and FOLLOW next 3 steps, then REMOVE them before posting the issue Follow CONTRIBUTING Guidelines https://github.com/artf/grap...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.