Cuando estableces una imagen o color de fondo en una sección de una página moderna de SharePoint, el cambio puede desaparecer después de guardar y volver a publicar la página. Esto ocurre porque la función de fondo de sección depende de una propiedad específica de web part que puede ser anulada por la configuración del diseño de página o las políticas de tema. Este artículo explica la causa raíz exacta del problema y proporciona una solución paso a paso que conserva el fondo en todos los tipos de sección.
Conclusiones clave: Solucionar el problema de guardado del fondo de sección
- Modo de edición de página > Configuración de sección > Fondo: La imagen o color de fondo se almacena por sección, no por página, y puede perderse si la sección contiene web parts incompatibles.
- Centro de administración de SharePoint > Temas > Tema personalizado: Un tema de toda la empresa puede anular los fondos de sección si el tema incluye una imagen de fondo para las secciones.
- Tipo de sección > Sección de ancho completo: Solo las secciones de ancho completo guardan de manera confiable los fondos personalizados; las secciones estándar pueden restablecer el fondo al publicar.
Por qué el fondo de la sección desaparece después de guardar
Las páginas modernas de SharePoint permiten establecer una imagen o color de fondo en cualquier sección. La configuración se almacena en la definición JSON de la página. Cuando guardas y publicas la página, SharePoint vuelve a representar el diseño de la página. Durante este proceso, dos cosas pueden causar la pérdida del fondo.
Primero, si la sección contiene un web part que tiene su propia propiedad de fondo, como el web part Héroe o el web part Vínculos rápidos con fondo, el fondo a nivel de sección puede ser sobrescrito por el fondo del web part. SharePoint prioriza el fondo del web part sobre el fondo de la sección.
Segundo, el tema del sitio puede anular los fondos de sección. Un tema personalizado que define un fondo para la clase CSS de la sección forzará a la sección a usar el fondo del tema en lugar del que estableciste en el editor de páginas. Esta es una causa común cuando el tema se aplica a nivel de colección de sitios o a nivel de inquilino.
Tercero, el tipo de sección importa. Una sección estándar de tres columnas no admite imágenes de fondo de la misma manera que una sección de ancho completo. Si estableces un fondo en una sección estándar, SharePoint puede eliminar la propiedad durante el guardado porque el contenedor de diseño no acepta la propiedad de fondo en todas las rutas de representación del navegador.
Pasos para solucionar el problema de guardado del fondo de sección
Sigue estos pasos en orden. Prueba después de cada paso para confirmar que el fondo permanece después de publicar.
- Cambia la sección a ancho completo
Edita la página. Selecciona la sección que pierde su fondo. En el panel de configuración de sección, cambia el diseño a Sección de ancho completo. Las secciones de ancho completo son el único tipo de sección que guarda de manera confiable imágenes y colores de fondo personalizados. Después de cambiar el diseño, establece el fondo nuevamente. Guarda y publica la página. - Verifica si hay web parts que tengan su propio fondo
Abre la página en modo de edición. Observa cada web part en la sección problemática. Si un web part tiene un color o imagen de fondo establecido, elimina el fondo del web part. Para hacerlo, edita el web part, ve a su panel de diseño o estilo y establece el fondo en Ninguno o Transparente. Guarda el web part. Luego establece el fondo de la sección nuevamente. Publica la página. - Crea un tema personalizado que no anule los fondos de sección
Si el problema persiste, es probable que el tema del sitio esté sobrescribiendo el fondo de la sección. Ve al Centro de administración de SharePoint > Temas > Temas personalizados. Crea un nuevo tema. En el JSON del tema, no incluyas una propiedad de fondo para la clase de sección. Exporta el tema actual del sitio usando PnP PowerShell. Busca la propiedad sectionBackground o sectionBackgroundImage. Elimina esas propiedades del JSON. Sube el tema modificado. Aplica el tema a la colección de sitios. Luego establece el fondo de la sección en la página nuevamente. - Limpia la caché del navegador y vuelve a publicar
Después de hacer cambios, limpia la caché del navegador para el sitio. En Chrome, presiona Ctrl+Shift+Supr, selecciona Imágenes y archivos en caché y limpia. Vuelve a cargar la página. Abre la página en modo de edición, establece el fondo de la sección nuevamente y publica. Esto obliga a SharePoint a volver a representar el JSON de la página sin datos de tema en caché. - Usa la API REST de SharePoint para verificar la propiedad de fondo
Si el fondo aún desaparece, verifica el JSON de la página directamente. Abre las herramientas de desarrollador del navegador (F12). Ve a la pestaña Red. Vuelve a cargar la página. Busca la llamada API para obtener el contenido de la página. Busca la propiedad sectionBackground en el JSON. Si la propiedad falta después de publicar, el fondo se eliminó durante el guardado. Esto confirma un conflicto de tema o web part. Repite los pasos 2 y 3.
Si el fondo de la sección aún no se guarda después de la solución principal
El fondo de sección funciona en modo de edición pero no en modo de vista
Esto indica un conflicto de CSS. El navegador aplica el fondo en modo de edición porque el editor inyecta estilos en línea. En modo de vista, el CSS del tema anula el estilo en línea. Para solucionarlo, agrega una anulación de CSS personalizada. Ve a Configuración del sitio > Página maestra y elige un archivo CSS personalizado. Agrega el siguiente CSS: div[data-automation-id="CanvasSection"] { background-image: none !important; background-color: inherit !important; }. Esto evita que el tema sobrescriba el fondo de la sección. Luego establece el fondo de la sección nuevamente en el editor de páginas.
La imagen de fondo no aparece en dispositivos móviles
Las páginas modernas de SharePoint usan diseño receptivo. En viewports móviles, los fondos de sección a veces se ocultan para mejorar el rendimiento. Esto es por diseño. Para forzar el fondo en móvil, debes usar una sección de ancho completo y establecer la imagen de fondo con una fuente de alta resolución. Además, agrega una consulta de medios CSS: @media (max-width: 640px) { div[data-automation-id="CanvasSection"] { background-image: url('your-image-url') !important; } }. Sube este CSS al archivo CSS personalizado del sitio.
El color de fondo se restablece a blanco después de publicar
Un fondo blanco después de publicar sugiere que el tema tiene un fondo blanco predeterminado para las secciones. Ve al Centro de administración de SharePoint > Temas > Temas personalizados. Edita el tema activo. En el JSON del tema, busca la propiedad sectionBackgroundColor. Establécelo en una cadena vacía o elimina la propiedad. Aplica el tema actualizado. Luego establece el color de la sección nuevamente en la página.
| Causa raíz | Método de solución | Tiempo de aplicación |
|---|---|---|
| El tipo de sección estándar no admite fondo | Cambiar la sección a ancho completo | 1 minuto |
| El fondo del web part anula el fondo de la sección | Eliminar el fondo del web part | 2 minutos |
| El tema personalizado sobrescribe el fondo de la sección | Modificar el JSON del tema para eliminar la propiedad sectionBackground | 10 minutos |
| Conflicto de CSS en modo de vista | Agregar anulación de CSS personalizada | 5 minutos |
Ahora puedes solucionar el problema de guardado del fondo de sección cambiando el tipo de sección a ancho completo, eliminando los fondos de web parts en conflicto y ajustando el tema del sitio. Comienza aplicando la solución de sección de ancho completo. Si el fondo aún no se guarda, verifica el JSON del tema. Como consejo avanzado, usa la API REST de SharePoint para inspeccionar el JSON de la página después de cada solución para confirmar que la propiedad de fondo esté presente en la definición de página guardada.