Setting background image results in duplicate style rules

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.

Thanks for the example @samuelmattos currently the only workaround I can give you is starting to use this option:

grapesjs.init({
  // Usually when you update the `style` of the component this changes the
  // element's `style` attribute. Unfortunately, inline styling doesn't allow
  // use of media queries (@media) or even pseudo selectors (eg. :hover).
  // When `avoidInlineStyle` is true all styles are inserted inside the css rule
  avoidInlineStyle: true,
})

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 guarantee its override. I've started to investigate the bug

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 images from the Id style rules. Looks like it doesn't really use them at all?

Well if the Style Manager sees the class on the selected component you will get its styles, try to deselect the class (by using the checkbox)