Curso de CSS
Dale estilo y vida a la web.
Aprende CSS con ejemplos interactivos y crea proyectos reales.
background-color, background-image y sus propiedades relacionadas controlan el fondo visual de cualquier elemento.
Explicación
Estas propiedades controlan el fondo de un elemento:
background-colorDefine un color sólido de fondo.
background-imageAgrega una imagen o un gradiente como fondo del elemento.
linear-gradient()Función que crea una transición suave entre dos o más colores, sin necesitar ninguna imagen.
background-size / -positionControlan el tamaño y la posición de una imagen de fondo dentro del elemento.
Reto rápido
Cambia el ángulo del gradiente (135deg) por otro valor y observa cómo cambia la dirección del color.
En esta lección
- Ejemplo interactivo
- Explicación de cada etiqueta
- Cuándo usarlo
- Errores comunes
Consejo
Los gradientes con linear-gradient() son una forma ligera y flexible de dar fondos atractivos sin cargar imágenes pesadas.
Dato extra
Puedes combinar background-color y background-image en la misma regla: el color se ve mientras la imagen carga, o se asoma en los bordes si la imagen no cubre todo.
Error común
Usar background-image con una ruta de archivo incorrecta: el elemento simplemente se queda sin fondo visible, sin ningún mensaje de error en pantalla.
Siguiente paso
Con el fondo resuelto, sigue el otro gran protagonista visual: los bordes.
Ir a la siguiente lección