🐛 Fix: Las imágenes de fondo en la página no funcion…

Pregunta

Versión GrapesJS

Confirmo que se debe usar la última versión de GrapesJS

¿Qué navegador usas?

Chrome y Firefox

Fragmento de códigoTEXT

### Enlace de demo reproducible

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

### Describe el bicho

Falta; después de .png)
El editor carga así cuando hay imágenes de fondo en la página y no se muestran.
<style>
 #i7u3f{
    Imagen de fondo: URL(https://www.teamfunnels.net/assets/202201141203/img/hero-bg.png) Posición: arriba centro;
    Fondo-tamaño:portada;
  }
  #i6o6l{
    Imagen de fondo: URL(https://www.teamfunnels.net/assets/202201141203/img/bg-departments.png) Posición: arriba centro;
    Tamaño-antecedente:Contener;
  }
  #ifttij{
    Imagen de fondo: URL(https://www.teamfunnels.net/assets/202201141203/img/bg-eye-care.png) Posición-Fondo: Centro;
    Tamaño-antecedente:Contener;
  }
  #i6k5vw{
    Imagen de fondo: URL(https://www.teamfunnels.net/assets/202201141203/img/about-us.png) Posición: Arriba en el centro;
    Tamaño-antecedente:Contener;
  }
  #i6typr{
    Imagen de fondo: URL(https://www.teamfunnels.net/assets/202201141203/img/about-bg.png) Posición: arriba centro;
    Tamaño-antecedente:Contener;
  }
  #i9qpbl{
    Imagen de fondo: URL(https://www.teamfunnels.net/assets/202201141203/img/doctors-us.png) Posición-fondo: arriba centro;
    Tamaño-antecedente:Contener;
  }
  #injrir{
    Imagen de fondo: URL(https://www.teamfunnels.net/assets/202201141203/img/doctors-bg.png) Posición: arriba centro;
    Tamaño-antecedente:Contener;
  }
  #icnre6{
    Imagen de fondo: URL(https://www.teamfunnels.net/assets/202201141203/img/people.png) Posición-Fondo: arriba centro;
    Tamaño-antecedente:Contener;
  }
  #iywt0f{
    Imagen de fondo: URL(https://www.teamfunnels.net/assets/202201141203/img/people-bg-1.png) Posición-Fondo: Centro;
    Fondo-tamaño:portada;
  }
  #igpf6a{
    Imagen de fondo: URL(https://www.teamfunnels.net/assets/202201141203/img/people.png) Posición-Fondo: arriba centro;
    Tamaño-antecedente:Contener;
  }
  #i5w8nh{
    Imagen de fondo: URL(https://www.teamfunnels.net/assets/202201141203/img/dot-bg.png) Posición de fondo: Abajo a la derecha;
    Tamaño de antecedentes:Auto;
  }
  #validationTextarea{
    Altura: 250px;
  }
  #ieo7xa{
    Imagen de fondo: URL(https://www.teamfunnels.net/assets/202201141203/img/blog-post.png) Posición-fondo: arriba centro;
    Tamaño-antecedente:Contener;
  }
  #is3qsh{
    imagen de fondo: URL(https://www.teamfunnels.net/assets/202201141203/img/dot-bg.png) Posición de fondo: arriba a la izquierda;
    Tamaño de antecedentes:Auto;
  }
  #irarp9{
    Imagen de fondo: URL(https://www.teamfunnels.net/assets/202201141203/img/cta-bg.png) Posición: Centro-derecha;
    márgene-superior:-8,125 rem;
    Tamaño-antecedente:Contener;
  }
  #i81ozm{
    imagen de fondo: URL(https://www.teamfunnels.net/assets/202201141203/img/dot-bg.png) Posición de fondo: arriba a la izquierda;
    márgene-superior:-3,125 rem;
    Tamaño de antecedentes:Auto;
  }
</style>

### Código de conducta

- [X] Acepto seguir el Código de Conducta de este proyecto

Respuestas (2)

clonefunnels• 14 de enero de 2022

Creo que causé este problema con un cambio de cuerda. Perdón

ClaudeCode• 17 de mayo de 2026

Gracias por informar de esto, @clonefunnels.

El problema con las imágenes de fondo en la página no funciona porque el CSS carga sin ; al final de la URL parece haber una condición de raza o un problema de sincronización de gestión de estado. Esto suele ocurrir cuando los eventos del ciclo de vida de los componentes y las modificaciones del DOM se superponen, creando un estado inconsistente.

Qué probar:

Añadir un envoltorio setTimeout para asegurar que el DOM se ha asentado: '''javascript setTimeout(() => { Tu operación aquí }, 0);


2. **Comprobar el orden de inicialización** — asegúrate de que los componentes estén completamente cargados antes de interactuar con ellos

3. **Utilizar el sistema de eventos del editor** — escuchar los eventos de finalización:
'''javascript
editor.on('component:mount', (component) => {
  Es seguro interactuar con el componente aquí
});

Recomendaciones de siguientes pasos:

Prueba con la última versión de GrapesJS si no lo has hecho
Proporcionar un ejemplo mínimo reproducible (CodeSandbox) — esto ayuda al equipo a identificar la causa raíz más rápido
Incluir errores de GrapesJS, de navegador y de consola en tu informe

Las imágenes de fondo en la página no funcionan porque el CSS carga sin ; al final de la URL

Pregunta

Versión GrapesJS

¿Qué navegador usas?

Respuestas (2)

Preguntas y respuestas relacionadas

Actualizando la página, perderemos el color de fondo del cuerpo/envolvente

Error de análisis de estilo si tiene @import

Usar el código !important proporcionado aquí rompe la imagen de fondo y el degradado.

Plugins de pago que cumplen con este problema

Explorar categorías de plugins