CSS Background (fondo)

Las propiedades <background> en CSS permiten definir colores, imágenes y gradientes en el fondo de los elementos. Se pueden usar desde simples colores hasta efectos visuales complejos.

Colores de fondo

El fondo más sencillo se define con <background-color>. Puedes usar cualquier color en formato HEX, RGB, HSL o por nombre.

En este ejemplo, un elemento <div> recibe un color de fondo azul claro:

Imágenes y gradientes de fondo

Con <background-image> se puede establecer una imagen, mientras que con la propiedad abreviada <background> también se pueden aplicar gradientes. La repetición y el tamaño de las imágenes también se pueden controlar.

Posicionamiento y tamaño del fondo

Con <background-repeat>, <background-size> y <background-position> defines cómo se muestra la imagen de fondo. Por ejemplo, cover llena todo el elemento, mientras que contain mantiene las proporciones.

Múltiples capas de fondo

En CSS puedes definir varios fondos a la vez. Por ejemplo, combinar imágenes y gradientes en una sola declaración background.

Background-attachment

La propiedad background-attachment controla si el fondo permanece fijo en el viewport (efecto parallax) o se desplaza con el contenido.

Uso de background abreviado

Con la propiedad abreviada background puedes definir color, imagen, posición, tamaño, repetición y attachment en una sola línea.

Consejos para usar fondos

Las propiedades de fondo pueden combinarse de forma creativa. Aquí algunos consejos:

• Usa gradientes para un fondo moderno y responsivo.
• Optimiza las imágenes de fondo grandes para no ralentizar la carga.
• Combina varias capas de fondo con la propiedad abreviada <background> para obtener un efecto más complejo.