Estilos de fondo - Ayuda de Webflow
Un resumen de los estilos de fondo que puedes configurar en un elemento: color, imágenes, gradientes, superposiciones de color y videos.
Color de fondo
Puedes establecer un color de fondo en cualquier elemento excepto en imágenes y videos (aunque puedes usar imágenes y videos como fondos). Agrega un color de fondo ingresando un valor de color (por ejemplo, hex, rgba o nombre de color) o usando el selector de color. También puedes agregar color de fondo a elementos de texto o contenido de texto específico dentro de un elemento de texto.
Si deseas que los colores de fondo sean consistentes en todo tu sitio, utiliza la etiqueta Body (Todas las páginas) para herencia. Estílalo seleccionando el elemento Body y eligiendo la etiqueta en el panel de Estilo o usando el menú de herencia. Cualquier cambio en el Body (Todas las páginas) será predeterminado para nuevos elementos.
La mayoría de los elementos tienen un fondo transparente por defecto. Algunos elementos, como el componente Slider, tienen un color predeterminado que puedes anular.
Imagen de fondo
Webflow ofrece muchas opciones para personalizar tu imagen de fondo.
Para agregar o cambiar la imagen de fondo:
- Desplázate a Fondos en el panel de Estilo
- Haz clic en Elegir imagen desde el panel de Activos
- Marca la casilla para @2x para imágenes más nítidas en dispositivos HiDPI
Para establecer un video de fondo, utiliza el componente de video de fondo en el panel de Añadir.
Tamaño de la imagen de fondo
- Personalizado: Establece valores de ancho/alto o porcentajes. Escala más grande con valores superiores al 100%.
- Cubrir: Llena y cubre el fondo, posiblemente recortando la imagen.
- Contener: Mantiene la imagen contenida dentro del elemento.
Posición de la imagen de fondo
Por defecto es arriba a la izquierda. Puedes ajustar posiciones manualmente (px, %, VW, VH).
Mosaico
Las imágenes de fondo se repiten vertical y horizontalmente por defecto. Controla para repetir horizontalmente, verticalmente o no repetir.
Fijo o desplazable
Elige No fijo (la imagen se desplaza) o Fijo (la imagen permanece en su lugar). Las imágenes Fijas están contenidas por el viewport.
Degradados
Los degradados pueden usarse solos o en capas sobre color/imagen de fondo. Dos tipos:
- Degradados lineales
- Degradados radiales
Ambos tienen paradas (puntos) donde los colores se desvanecen.
Degradado lineal
Establece la dirección por ángulo mediante dial, flechas (incrementos de 45 grados) o entrada de campo.
Paradas de degradado
Edita color/opacidad en las paradas. Superponer sobre imagen hace visible la imagen a menor opacidad. Añade paradas haciendo clic. Elimina arrastrando fuera.
Repetir
Alterna para repetir el degradado.
Invertir
Icono para invertir posiciones de paradas.
Degradado radial
Crea un degradado circular. La parada izquierda es el color en el centro.
Posición
Elige el punto focal mediante puntos o manualmente con valores/unidades.
Tamaño
Controles preestablecidos:
- Lado más cercano: centro al lado más cercano
- Esquina más cercana: centro a la esquina más cercana
- Lado más lejano: centro al lado más lejano
- Esquina más lejana: (por defecto)
Superposición de color
Añade superposición de color a fondos con selector de color y opacidad.
Capas de imágenes y degradados
Apila múltiples imágenes de fondo, degradados y superposiciones para efecto. Reordena arrastrando, alterna visibilidad con icono de ojo, elimina con basura.
Video de fondo
Los videos de fondo son videos silenciosos y en bucle para fondos que añaden un toque cinematográfico. Ten en cuenta:
Añadir con Búsqueda rápida (CMD/CTRL+E) o Panel de añadir > Componentes. Sube tu video (<30MB; webm, mp4, mov, ogg). Los nombres de archivo deben evitar espacios/caracteres especiales.
La transcodificación ocurre después de la carga (mp4 y webm para soporte del navegador).
Configuración del video
- Repetir video: se repite continuamente.
- Reproducción automática del video: comienza al cargar la página.
- Incluir botón de reproducir/pausar: el visitante puede controlar la reproducción.
Previsualización del video de fondo
- Pasar el ratón sobre la miniatura
- Abrir en una nueva pestaña
- Icono de previsualización en la barra
Reemplazando el video de fondo
Abre la configuración para reemplazar el video, transcodificar, previsualizar, etc.
Usar el video de fondo como una sección
Coloca contenido dentro del elemento de video de fondo. Estiliza como de costumbre en el panel de estilo.
Superposición de video de fondo
Añade un degradado o superposición sólida para contraste. La superposición se sitúa sobre el video, debajo del contenido.
¡Y así es como se usan los fondos en Webflow!