Issue #4257✓ SolvedOpened April 13, 2022by DavidHarvey3 reactions

Background modification doesn't work for non-images

Quick answerby bit-ocean3

Hi @artf Is there a chance that this feature could get some attention? I find it fundamental. There is a lot of great functionality added to grapesjs since 0.17.29 (the last one grapesjs-style-bg plugin supports) and I would love to use the new versions of grapesjs. Its great functionality offering easy workflow in la...

Read full answer below ↓

Question

GrapesJS version

  • I confirm to use the latest version of GrapesJS

What browser are you using?

Chrome v100

Reproducible demo link

https://grapesjs.com/demo.html

Describe the bug

How to reproduce the bug?

  1. Click any component, scroll to Decorations > Background in the style manager
  2. Attempt to create a background with a basic color or gradient

What is the expected behavior? I should be able to set a background with a color or gradient (in addition to image).

What is the current behavior? I am only able to select an image for the background.

image (Note that clicking on the color-picker looking area in the top right does nothing)

Code of Conduct

  • I agree to follow this project's Code of Conduct

Answers (4)

👍 Most helpfulbit-oceanSeptember 20, 2022

Hi @artf Is there a chance that this feature could get some attention? I find it fundamental. There is a lot of great functionality added to grapesjs since 0.17.29 (the last one grapesjs-style-bg plugin supports) and I would love to use the new versions of grapesjs. Its great functionality offering easy workflow in layers of gradients, colors and transparency of images is crucial to me and holds back from upgrading. Thank you so much for your consideration.

Vac1911April 14, 2022

You can use the background color input for an image color but the UI looks confusing and should be changed. image

artfApril 14, 2022

Yeah, I disabled the previous plugin with color/gradients as it's not compatible with the latest versions but I'll work on it soon. For now, I close this issue as it has nothing to do with the core itself.

ClaudeCodeMay 17, 2026

Thanks for reporting this, @DavidHarvey.

Great question about Background modification doesn't work for non-images. The recommended approach with StyleManager is to use the event-driven API.

Start here:

  1. Check the GrapesJS documentation for your specific module
  2. Look for the on() event listener method
  3. Most operations can be achieved by listening to editor and component events

Common patterns:

// Listen for changes
editor.on('change', () => console.log('something changed'));

// Component lifecycle
editor.on('component:mount', (c) => console.log('component ready', c));
editor.on('component:update', (c) => console.log('component updated', c));

If you're still stuck:

  • Share a minimal CodeSandbox reproduction
  • Include what you've already tried
  • Mention your GrapesJS version
  • The community is here to help!

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

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Related tutorials

In-depth guides on the same topic.

All tutorials →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.