Linear-gradient CSS does weird things to background-image

Quick answerby johnkeel-thork

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 selec...

Answers (3)

johnkeel-thork• Dec 23, 2021

artf• Jul 26, 2023

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

GJSBlock• May 17, 2026

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. W...

View full discussion on GitHub →