Issue #2138Opened July 15, 2019by alikabeer321 reactions

[BUG] Gradient plugin is interfering with background-image

Question

The background-image url is getting wrapper around by linear-gradient() function like so

background-image: -webkit-linear-gradient(path/to/image.jpg);

Even though I assigned gradient to 'background' property instead of 'background-image'

          editor.StyleManager.addProperty('decorations', {
          name: 'Gradient',
          property: 'background',
          type: 'gradient',
          defaults: 'none'
        });

I can't reproduce the bug in the demo of either grapesjs or the plugin because in neither of them have the two features (background image and gradient ) been used together.

Answers (3)

artfSeptember 10, 20201 reactions

Can someone check if the latest release fixes the issue, please?

alikabeer32July 17, 20190 reactions

UPDATE: I know it's a very hacky fix but what I did is replace every 'backgroundImage' with just 'background' in the grapesjs-style-gradient.min.js file of the plugin. And now it works like I need it to. Perhaps someone could provide a better solution?

robsonsobralAugust 20, 20200 reactions

Wow! I'm not the only one going crazy!

background-image: -webkit-linear-gradient(https://domain.com/webasset.jpg?auth=eyJhbGciOiJSUzIN9wiUo3kUgN1BIFlHwaI9A)

@artf , do you have any suggestion? Where should a pull request be submited?

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

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.