Los fondos son uno de los principales elementos gráficos que podemos aportar en un diseño web, no solo para el fondo de la página completa, sino también para los elementos o cajas que contiene.

Como todo estilo visual, definir los fondos es responsabilidad del CSS y nunca del HTML. En este artículo vamos a ver distintas maneras de aplicar fondos a los elementos de la página, junto con algunas recomendaciones útiles.

Para abordar los Fondos con CSS hemos cubierto los siguientes apartados de interés.

• Cómo aplicar fondos de color con CSS
• Cómo aplicar fondos de imagen con CSS
• Otros atributos para definir el fondo con CSS
• Múltiples fondos en un mismo elemento con CSS
• Shortcut background para aplicar varios atributos de fondo CSS
• Consejos para el uso de fondos
• Conclusión sobre fondos y CSS

Cómo aplicar fondos de color con CSS

Los fondos se aplican mediante propiedades CSS. Hay disponibles muchas configuraciones para definir una enorme cantidad de detalles del fondo, por lo que encontraremos diversas propiedades.

La manera más sencilla de aplicar un fondo es usar la propiedad background-color, indicando a continuación el RGB del color que deseamos aplicar.

body {
    background-color: #0f1473;
}

En este caso hemos aplicado el fondo sobre la etiqueta BODY, por lo que se trata de un fondo que afectará a toda la página. Sin embargo, podemos aplicar fondos a cualquier elemento que queramos.

h1 {
    background-color: #f5f5f5;
}

Cómo aplicar fondos de imagen con CSS

También podemos aplicar un fondo con una imagen, con el atributo background-image, de la siguiente manera.

body {
    background-image: url(fondo-degradado.png)
}

Generalmente las imágenes que apliquemos como fondo se compondrán con un mosaico. Es decir, si la imagen no es lo suficientemente grande como para ocupar toda la página (o todo el elemento al que se haya aplicado un fondo), se repetirá esa misma imagen, una y otra vez, para rellenar todo el espacio disponible.

Esto nos puede ayudar bastante cuando tenemos un patrón que queremos que se repita, formando un diseño homogéneo para todo el elemento. Independientemente del tamaño de la página, el fondo se repetirá y cubrirá todo el espacio disponible.

Por ejemplo, esta imagen tiene 400x400, pero la podríamos poner en el fondo de la página y formará un mosaico que se apaptará a todos los tamaños posibles de pantalla.

body {
    background-image: url(patron.png)
}

Otros atributos para definir el fondo con CSS

Hemos visto dos atributos básicos para fondos, como son background-color y background-image, pero hay bastantes más. Vamos a explicar los que debes de conocer para la mayoría de las necesidades.

background-repeat

Este atributo es el que tiene la responsabilidad de decidir si realmente queremos que una imagen se muestre como un mosaico, o si queremos que aparezca una única vez.

body {
    background-image: url(patron.png);
    background-repeat: no-repeat;
}

Esto haría que el patrón solo se viera una única vez y por lo tanto no cubrirá toda la página si la imagen no es suficientemente grande.

Pero podemos definir que esa imagen se muestre haciendo un mosaico en la vertical o en la horizontal.

body {
    background-image: url(patron.png);
    background-repeat: repeat-y;
}

Así se repetirá en la vertical. Si usamos repeat-x el mosaico se producirá en la horizontal. Además, el valor predeterminado es repeat, que corresponde al comportamiento normal del mosaico.

background-position

Este atributo te sirve para definir dónde se va a colocar el fondo, sobre el elemento o sobre la página. Inicialmente la posición será "0 0", lo que quiere decir que la esquina superior izquierda de la imagen se colocará en la esquina superior izquierda del elemento al que se haya aplicado el fondo.

body {
    background-image: url(fondo.png);
    background-position: center;
}

Este ejemplo producirá que la imagen se sitúe en el centro. Luego se repetirá como mosaico, porque a veces será difícil identificarlo, depende del tamaño y la forma de la imagen.

Para verlo bien quizás tendrás que quitarle el efecto de mosaico:

body, html {
    height: 100%;
}
body {
    background-image: url(mi-fondo.png);
    background-position: center;
    background-repeat: no-repeat;
}

En este ejemplo, nuestro patrón se colocará en la posición central de la página.

El background-position te admite en realidad dos valores. Uno para la posición horizontal y otro para la vertical.

body {
    background-image: url(patron.png);
    background-position: 100px 500px;
    background-repeat: no-repeat;
}

Esto haría que el fondo se desplace 100 píxeles a la derecha y 500 píxeles hacia abajo.

background-size

Este atributo resulta muy potente para definir no solo el tamaño del fondo sino también cómo va a cubrir todo el elemento donde lo pongamos.

Por ejemplo, una configuración muy útil es "cover" que permite que el fondo cubra todo el espacio disponible.

body {
    background-image: url(fondo-css.jpg);
    background-size: cover;
}

Así conseguimos que el fondo cubra siempre todo el contenedor, con lo que se agrandará o se escogerá para conseguirlo, pero manteniendo siempre las proporciones.

La opción "cover" no garantiza que la imagen se vea por completo, porque depende de las proporciones de la imagen y las del elemento donde se aplica el fondo. Por lo que existe otro atributo posible llamado "contain", que nos asegura que la imagen se verá completa, aunque deje espacio del contenedor sin cubrir.

body {
    background-image: url(fondo-css.png);
    background-size: contain;
}

También nos soporta indicar el tamaño de la imagen que queramos que se aplique:

body {
    background-image: url(fondo.jpg);
    background-size: 100px 300px;
}

En este caso 100px se refiere al tamaño en la horizontal y 300px al tamaño en la vertical.

background-attachment

Este atributo CSS aplica a la manera que tiene el fondo de engancharse al contenedor, en caso que se pueda hacer desplazamiento sobre él. La verdad es que no se usa demasiado, pero puede servir para hacer algunos efectos interesantes.

Sus tres valores posibles son scroll, fixed y local. El valor predeterminado es "scroll", lo que produce que el fondo se mueva cuando el contenedor tiene scroll, pero si queremos que el fondo se quede fijo podemos usar fixed.

body {
    background-image: url(fondo-degradado.png);
    background-attachment: fixed;
}

background-origin

Define dónde queremos que se pinte el fondo. De nuevo, no se usa mucho. Generalmente los fondos se pintan en todo el elemento, incluyendo el padding. Pero podríamos definir otros comportamientos como por ejemplo que se pinte solamente en el área del contenido, sin incluir el padding.

div {
    background-image: url(patron.png);
    background-repeat: no-repeat;
    background-origin: content-box;
    padding: 40px;
    border: 3px solid red;
}

En este caso content-box hace que el fondo no ocupe el espacio del padding. Si no tienes el atributo padding no tiene sentido usarlo y además, si no colocas background-repeat: no-repeat; será también imposible ver el efecto.

Múltiples fondos en un mismo elemento con CSS

A partir de CSS 3 es posible aplicar muchos fondos de imagen a un mismo elemento. Para elllo simplemento podemos indicar todas las imágenes de fondo que queramos usar, separadas por comas.

body {
    background-color: #f5f5f5;
    background-image: url(fondo-degradado.png), url(patron.png);
    background-position: 0, center;
    background-repeat: no-repeat, repeat;
    background-size: cover, auto;
    background-attachment: fixed, scroll;
}

Es posible aplicar como fondo todas las imágenes que necesites. La primera que apliques será la que se ponga por encima de las demás. Puedes trabajar con transparencia en las imágenes para que consigas que las imágenes que pones después se puedan llegar a ver.

Para aplicar los otros atributos de fondo, también puedes asignarlos de manera individual a cada imagen, si separas los valores por comas, como se ha podido ver en el ejemplo anterior. Así puedes conseguir cosas como que unas imágenes se queden fijas y otras se muevan cuando se hace scroll sobre el elemento, ampliando las posibilidades de tu diseño.

Shortcut background para aplicar varios atributos de fondo CSS

En lugar de especificar los detalles de tu fondo con una cantidad enorme de atributos distintos puedes usar el resumen background indicando todos los valores del fondo, separados por espacios.

body {
  background: url(patron.png) repeat fixed #b0ffe3;
}

Puedes colocar cualquier tipo de atributos de fondo. El único problema de esta manera resumida es que quieras colocar diversos atributos y no alcances a mezclarlos en la sintaxis correcta. Si es algo sencillo la regla que te recomendamos recordar es que el último valor será el del color plano. Los otros valores los sueles poder mezclar generalmente sin problemas, pero a veces para no liarse es preferible acudir a las propiedades completas (en lugar del shortcut) y así estás seguro que el navegador no se equivocará al interpretarlo.

Consejos para el uso de fondos

Es importante tener en cuenta varios consejos para que tus fondos no sean un incordio a la hora de visitar la página. En resumen lo más importante serían los siguientes puntos:

Usabilidad

El fondo no debe dificultar la legibilidad del contenido, por lo que es importante que si usas fondos apliques el suficiente contraste con los textos. Además es muy incómodo que los fondos tengan colores claros y oscuros, porque entonces no se leerán bien los textos, ni claros ni oscuros.

Colocar siempre un fondo de color como fallback

Es interesante siempre colocar un color de fondo en los elementos que tengan imágenes de fondo. Así, si la imagen no carga, al menos se verá el color.

h1 {
    background-color: #f5f5f5;
    background-image: url(fondo-degradado.png);
} 

Transparencias

Si quieres colocar fondos ligeramente transparentes en los elementos de tu página, para conseguir efectos diversos, puedes hacerlo de dos modos principalmente.

Si son fondos de color plano, usa los valores de colores RGBA, que permiten canal aplha.

h1 {
    background-color: rgba(30, 200, 150, 0.4);
} 

Si el fondo que quieres poner con transparencia es sobre una imagen, lo más sencillo es que la imagen en si la guardes con una transparencia y por tanto lo lógico será usar el formato png de 24 bits, que tiene canal alpha. También hay otras técnicas más complejas como por ejemplo usar pseudoelementos como ::before que te dejamos para tu propia investigación.

Fondos con degradados

Últimamente se estilan fondos con degradados. Los podemos encontrar en multitud de de páginas web. Estos fondos los puedes realizar con imágenes, pero también te recomendamos explorar los degradados de CSS, que permiten realizar efectos muy vistosos y tienen la ventaja de adaptarse a todas las pantallas y no consumir la transferencia de las imágenes.

Puedes leer acerca de los degradados en CSS. Además de degradados normales, también puedes usar estas mismas técnicas para realizar patrones. Por ejemplo prueba este fondo que crea una repetición de una greca para hacer un efecto tridimensional.

body {
    background-color: #dfdfe5;
    background: linear-gradient(135deg, #0f147355 25%, transparent 25%) -23px 0/ 46px 46px, linear-gradient(225deg, #0f1473 25%, transparent 25%) -23px 0/ 46px 46px, linear-gradient(315deg, #0f147355 25%, transparent 25%) 0px 0/ 46px 46px, linear-gradient(45deg, #0f1473 25%, #dfdfe5 25%) 0px 0/ 46px 46px;
}

Conclusión sobre fondos y CSS

Creemos que esta ha sido una guía definitiva sobre fondos en CSS. Pocas dudas puedes tener sobre cómo aplicarlos, pero recuerda que siempre puedes consultarnos en la sección de FAQ.

Sobre todo, recuerda que los fondos deben ser un criterio de diseño que no debe dificultar consumir el contenido de tu web. Si respetas esta premisa tendrás éxito en la aplicación de fondos, ya sean de color o de imágenes.