🐛 Fix: On page background images don't work because…

Question

GrapesJS version

I confirm to use the latest version of GrapesJS

What browser are you using?

Chrome and Firefox

Code SnippetTEXT

### Reproducible demo link

https://www.teamfunnels.net/login.php demo demo

### Describe the bug

Missing required ; after .png)
The editor loads this way when there are background images on the page and they don't display.
<style>
 #i7u3f{
    background-image:url(https://www.teamfunnels.net/assets/202201141203/img/hero-bg.png) background-position:top center;
    background-size:cover;
  }
  #i6o6l{
    background-image:url(https://www.teamfunnels.net/assets/202201141203/img/bg-departments.png) background-position:top center;
    background-size:contain;
  }
  #ifttij{
    background-image:url(https://www.teamfunnels.net/assets/202201141203/img/bg-eye-care.png) background-position:center;
    background-size:contain;
  }
  #i6k5vw{
    background-image:url(https://www.teamfunnels.net/assets/202201141203/img/about-us.png) background-position:top center;
    background-size:contain;
  }
  #i6typr{
    background-image:url(https://www.teamfunnels.net/assets/202201141203/img/about-bg.png) background-position:top center;
    background-size:contain;
  }
  #i9qpbl{
    background-image:url(https://www.teamfunnels.net/assets/202201141203/img/doctors-us.png) background-position:top center;
    background-size:contain;
  }
  #injrir{
    background-image:url(https://www.teamfunnels.net/assets/202201141203/img/doctors-bg.png) background-position:top center;
    background-size:contain;
  }
  #icnre6{
    background-image:url(https://www.teamfunnels.net/assets/202201141203/img/people.png) background-position:top center;
    background-size:contain;
  }
  #iywt0f{
    background-image:url(https://www.teamfunnels.net/assets/202201141203/img/people-bg-1.png) background-position:center;
    background-size:cover;
  }
  #igpf6a{
    background-image:url(https://www.teamfunnels.net/assets/202201141203/img/people.png) background-position:top center;
    background-size:contain;
  }
  #i5w8nh{
    background-image:url(https://www.teamfunnels.net/assets/202201141203/img/dot-bg.png) background-position:bottom right;
    background-size:auto;
  }
  #validationTextarea{
    height:250px;
  }
  #ieo7xa{
    background-image:url(https://www.teamfunnels.net/assets/202201141203/img/blog-post.png) background-position:top center;
    background-size:contain;
  }
  #is3qsh{
    background-image:url(https://www.teamfunnels.net/assets/202201141203/img/dot-bg.png) background-position:top left;
    background-size:auto;
  }
  #irarp9{
    background-image:url(https://www.teamfunnels.net/assets/202201141203/img/cta-bg.png) background-position:center right;
    margin-top:-8.125rem;
    background-size:contain;
  }
  #i81ozm{
    background-image:url(https://www.teamfunnels.net/assets/202201141203/img/dot-bg.png) background-position:top left;
    margin-top:-3.125rem;
    background-size:auto;
  }
</style>


### Code of Conduct

- [X] I agree to follow this project's Code of Conduct

Answers (2)

clonefunnels• January 14, 2022

I think I caused this problem with a string replace. Sorry

ClaudeCode• May 17, 2026

Thanks for reporting this, @clonefunnels.

The issue with On page background images don't work because CSS loads with no ; at the end of URL appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modifications overlap, creating an inconsistent state.

What to try:

Add a setTimeout wrapper to ensure the DOM has settled:

setTimeout(() => {
  // your operation here
}, 0);

Check initialization order — make sure components are fully loaded before you interact with them
Use the editor's event system — listen to completion events:

editor.on('component:mount', (component) => {
  // safe to interact with component here
});

Recommended next steps:

Test with the latest GrapesJS version if you haven't
Provide a minimal reproducible example (CodeSandbox) — this helps the team identify the root cause faster
Include GrapesJS version, browser, and console errors in your report

On page background images don't work because CSS loads with no ; at the end of URL

Question

GrapesJS version

What browser are you using?

Answers (2)

Related Questions and Answers

Unable to use transparent fill in Block media svg

Using !important code provided here breaks background image and gradient.

When we resize an image with a class 'xyz', all the elements on the page with same class also gets resized because editor adds css to those classes.

Paid Plugins That Match This Issue

Browse Plugin Categories