Background-image not picked up from styles attribute
The styles I've defined for my element aren't reachable in the style manager. When I click the box in the canvas I'd really expect to see all the styles it has in the style manager, rather than the the styles of the class Grapes has added. You said that the background doesn't show because it's using the .fluid-contain...
Read full answer below ↓Question
As title + background-image is removed by styles manager when added a background layer.
- Getting started: https://jsfiddle.net/5upe6myo/
- Note background-image
- Click between the text. Should show as "Box".
- Under Styles > Decorations, the background-image isn't shown.
- Clicking "+" next to background removes the background-image.
Answers (3)
The styles I've defined for my element aren't reachable in the style manager. When I click the box in the canvas I'd really expect to see all the styles it has in the style manager, rather than the the styles of the class Grapes has added. You said that the background doesn't show because it's usin...
Actually, this is how style manager works with classes. When you select the "Box" you can see that you have picked ".fluid-container.c318" selector, which doesn't have any bg, but when you uncheck "fluid-container" class, the current selector will be "c318" and now the bg is shown. Probably we need...
This seems a little weird. Grapes adding the class c318 makes my styles unreachable. I'd expect the html and styles provided to be editable.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #5743
XSS vulnerability in iframe attribute src
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Edge v122 Reproducible demo link https://j...
Issue #6281
Layer Manager does not allow reordering on same level. only nesting is allowed on top level(right under body) older versions (e.g: 0.21.8
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? latest chrome, firefox, edge Reproducible...
Issue #1812
[Bug]: 404 when trying to add background image (reproducible in demo)
Visit https://grapesjs.com/demo.html in Chrome IncognitoClick the "Header" elementClick Decorations > BackgroundDelete Layer 2Click Layer 1...
Issue #6603
Ampersand is not escaped in attribute value
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v142.0.7392.0 (canary) Reproducible...
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 →Related tutorials
In-depth guides on the same topic.
Tutorial
Super Tooltip for GrapesJS — Version 0.1.5 Released 🎉
We’re excited to announce the v 0.1.5 update of Super Tooltip, our floating‑menu and tooltip plugin for GrapesJS
Tutorial
GrapesJS in 2026: The Complete Guide to the Open-Source Web Builder Framework
Master GrapesJS in 2026. Architecture, code examples, React integration, plugin development, Studio SDK, and how it compares to other projects
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.