Issue #932✓ SolvedOpened March 8, 2018by TheMysticMan3 reactions

Setting background image results in duplicate style rules

Quick answerby samuelmattos2

Hi, i have same problem. In preview https://jsfiddle.net/szLp8h4n/77/ When I change the background of the box in the preview it changes, but in the code it generates another id. If you save the template in this way and try to display it on the page it does not change the background.

Read full answer below ↓

Question

Hi @artf, I have one strange little problem. I have a custom trait which has an implementation for setting images and background images. When I set the background image a second time by using the code below I'm getting duplicated styling rules on the element Id. I already played around a bit with the forceClass and avoidInlineStyle but it doesn't really help with this problem. Maybe related to this problem: The element also has a class with a default background image. When I open the StyleManager I only see that background image in there. Not the images from the Id style rules. Looks like it...

Answers (3)

👍 Most helpfulsamuelmattosMarch 15, 2018

Hi, i have same problem. In preview https://jsfiddle.net/szLp8h4n/77/ When I change the background of the box in the preview it changes, but in the code it generates another id. If you save the template in this way and try to display it on the page it does not change the background.

artfMarch 17, 2018

Thanks for the example @samuelmattos currently the only workaround I can give you is starting to use this option: Probably in some next release I'll set it to true by default. Unfortunately, this will not gonna fix the bug of duplicated rules but at least the rule will be placed in the way to guara...

artfMarch 8, 2018

First of all, I suggest using self.target.addStyle({'background-image': 'url(...)'}) for your case which is less verbose.Maybe related to this problem: The element also has a class with a default background image. When I open the StyleManager I only see that background image in there. Not the image...

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.