Fondo - Trucos CSS | Almanaque CSS 2024

La backgroundpropiedad en CSS le permite controlar el fondo de cualquier elemento (qué pinta debajo del contenido en ese elemento). Es una propiedad abreviada, lo que significa que le permite escribir lo que serían múltiples propiedades CSS en una. Como esto:

body ( background: url(sweettexture.jpg.webp) /* image */ top center / 200px 200px /* position / size */ no-repeat /* repeat */ fixed /* attachment */ padding-box /* origin */ content-box /* clip */ red; /* color */ )

background se compone de otras ocho propiedades:

background-image
background-position
background-size
background-repeat
background-attachment
background-origin
background-clip
background-color

Puede usar cualquier combinación de estas propiedades que desee, en casi cualquier orden (aunque el orden recomendado en la especificación está arriba). Sin embargo, hay un problema: todo lo que no especifique en la backgroundpropiedad se establece automáticamente en su valor predeterminado. Entonces, si haces algo como esto:

body ( background-color: red; background: url(sweettexture.jpg.webp); )

El fondo será transparente, en lugar de rojo. Sin embargo, la solución es fácil: simplemente defina background-colordespués background, o simplemente use la abreviatura (p background: url(… ) red;. Ej. )

Varios fondos

CSS3 agregó soporte para múltiples fondos, que se superponen entre sí. Cualquier propiedad relacionada con los fondos puede tomar una lista separada por comas, como esta:

body ( background: url(sweettexture.jpg.webp), url(texture2.jpg.webp) black; background-repeat: repeat-x, no-repeat; )

Cada valor de la lista separada por comas corresponde a una capa: el primer valor es la capa superior, el segundo valor es la segunda capa y el color de fondo es siempre la última capa.

Recetas

Vea el Pen emBzRd de Timothy Miller (@tjacobdesign) en CodePen.

Soporte del navegador

El soporte varía entre las diferentes propiedades específicas, y cada artículo correspondiente en el Almanaque tiene notas de soporte de navegador únicas. Sin embargo, los fondos básicos de un solo color y las imágenes individuales funcionan en todas partes, y cualquier cosa que no sea compatible simplemente vuelve a la siguiente mejor opción, ya sea una imagen o un color.