Existen varias propiedades en CSS que permiten modificar los fondos, desde colores sólidos hasta imágenes con su tamaño o posición.

Imágenes de fondo

Si no quieres un color plano de fondo, sino que prefieres utilizar una imagen, puedes utilizar la propiedad background-image. En el valor, se introducirá el nombre de la imagen o la dirección donde está alojada, siempre rodeado del texto url().

En el caso de que sólo se coloque el nombre de la imagen (por ejemplo, imagen.jpg), el navegador buscará la imagen en la misma carpeta donde está el archivo CSS. Esto es lo que se llama ruta relativa. En el caso de que se coloque la ruta completa (por ejemplo, http://www.emezeta.com/img/logo.png), accederá a la imagen alojada en esa dirección. Esto es lo que se llama ruta absoluta.

Propiedad Valor Significado
background-image: none No utiliza ninguna imagen de fondo.
background-image: url(imagen.jpg) Usa la imagen de nombre imagen.jpg como fondo.

NOTA: En el caso de que no se encuentre la imagen o el valor de background-image se haya establecido a none, no se utilizará ninguna imagen de fondo, y en su lugar se mostrará el color establecido con background-color.

Por otro lado, una vez establecida una imagen de fondo con background-image, se puede personalizar la forma en la que se mostrará dicha imagen mediante propiedades como background-repeat, background-attachment o background-position:

Propiedad Valor Significado
background-repeat: repeat Repite la imagen de fondo horizontalmente y verticalmente.
repeat-x Repite la imagen de fondo sólo horizontalmente (eje x).
repeat-y Repite la imagen de fondo sólo verticalmente (eje y).
no-repeat La imagen de fondo no se repite.
background-attachment: scroll Cuando hacemos scroll la imagen de fondo se mueve.
fixed Cuando hacemos scroll, la imagen de fondo permanece fija.
background-position: [pos-x] 1 parámetro. Desplaza la imagen de fondo al punto (x, 50%).
[pos-x] [pos-y] 2 parámetros. Desplaza la imagen de fondo al punto (x,y).

La propiedad background-repeat especifica si la imagen se repetirá horizontalmente (repeat-x), si se repetirá verticalmente (repeat-y), si lo hará en ambas direcciones (repeat) o en ninguna (no-repeat). Por defecto, si no se indica nada, esta propiedad está ajustada en repeat.

La propiedad background-attachment especificará si la imagen de fondo seguirá el desplazamiento del usuario (scroll, el comportamiento por defecto) o por el contrario, se quedará fijado y no se moverá (fixed), mientras el usuario se desplaza por la página.

Por último, background-position coloca la imagen en la zona especificada por pos-x y por pos-y. Por defecto, esos valores son 0% 0%, pero pueden especificarse con unidades (porcentajes, píxels, etc...) o mediante palabras clave que representan zonas predefinidas (top, left, right, bottom y center). Si sólo se especifica un valor, se tomará para el eje x, mientras que el valor del eje Y será automáticamente establecido a center (o 50%).

Atajo: Imágenes de fondo

Es posible establecer todas las propiedades anteriores en una sola regla de CSS a modo de atajo, y así ahorrar mucho espacio en escribir las propiedades anteriores por separado. Aunque no es estrictamente obligatorio, se aconseja respetar el siguiente orden (acostumbrarse a usar el mismo orden es una buena práctica):

div {
    background: <color> <image> <repeat> <attachment> <position>
}

Por ejemplo:

div {
    background: #FFF url(imagen.jpg) repeat-x scroll top left;
}

Y con esto, ya conocemos las ventajas básicas de CSS a través de propiedades tan interesantes como background-color o background-image. Sin embargo, la llegada de CSS3 incorporó novedades muy interesantes en nuestros navegadores, que mediante versiones anteriores a CSS3 no era posible realizar (o era algo bastante complejo).

Opacidad

Es posible utilizar la propiedad CSS3 opacity para establecer una transparencia total sobre el elemento indicado. El valor a indicar es un número entre 0 (completamente transparente) y 1 (completamente visible).

div {
    background-color:#FF0000;
    color:#FFFFFF;
    opacity:0.5;
}

Grumpy cat con div transparente

Como se puede ver en la imagen, esto hará que la capa div (el recuadro rojo) se muestre al 50% de opacidad, con color de texto blanco (en el caso de existir texto) y fondo de color rojo. Si buscamos una transparencia parcial (color de fondo transparente que no afecte al texto) debemos utilizar los valores RGBA o HSLA (canales alfa) en la propiedad background-color:

div {
    color:white;
    background-color: RGBA(255, 0, 0, 0.5);
}

De este modo, sólo aplicamos la transparencia al color de fondo, mientras que con opacity se aplica a toda la capa en sí, por lo que afecta a todos los elementos que están dentro de la capa.

Fondos múltiples

CSS3 ofrece nuevas características a la hora de utilizar imágenes de fondo, como por ejemplo la posibilidad de establecer múltiples imágenes de fondo de forma simultánea:

div {
    background-image: url(manz.png), url(fondo2.jpg), url(fondo3.jpg);
    background-repeat: no-repeat, repeat-x, repeat;
}

De esta forma, se pueden utilizar varias imágenes y superponerlas una sobre otra (especialmente interesante si la primera imagen de fondo está en formato PNG, la cuál soporta transparencias), e incluso aplicarle diferentes propiedades de repetición o posicionamiento a cada una, como se puede ver en el ejemplo anterior.

Además, CSS3 también añade nuevas propiedades para especificar como cubrirá la imagen de fondo al elemento en cuestión:

Propiedad Valor Significado
background-clip: border-box | padding-box | content-box Modo de relleno de la imagen de fondo
background-origin: border-box | padding-box | content-box Origen del modo de relleno del fondo

La propiedad background-clip establece la forma en la que el color o la imagen de fondo cubrirá el elemento, mientras que la propiedad background-origin intenta posicionar el comienzo de la imagen de fondo, útil con imágenes. La primera utiliza border-box como valor por defecto, mientras que la segunda utiliza padding-box.

Ambas propiedades pueden tomar uno de los siguientes valores:

Valor Significado
padding-box La imagen o color de fondo cubrirá la zona del espaciado y contenido.
border-box La imagen o color de fondo cubrirá la zona del borde, espaciado y contenido.
content-box La imagen o color de fondo cubrirá sólo la zona del contenido.

Consejo: Una buena forma de darse cuenta del funcionamiento de estas propiedades es establecer un borde grueso punteado. Usando border-box la imagen de fondo se extenderá en todo el elemento, incluyendo borde, espaciado y contenido. El valor padding-box extenderá la imagen de fondo sólo mediante el padding y el contenido, y por último, la propiedad content-box extenderá la imagen de fondo sólo en la zona del contenido.

Por último, la propiedad background-size ajusta el tamaño (ancho y alto) de la imagen de fondo, por si deseamos escalarla. Por defecto, una imagen de fondo toma automáticamente el tamaño de la imagen (que podría ser demasiado grande, por ejemplo). Para no tener que modificar la imagen original, podemos utilizar esta propiedad y ajustarla mediante CSS:

Propiedad Valor Significado
background-size: [ancho] 1 parámetro. Aplica un tamaño de (ancho × auto) a la imagen de fondo.
[ancho] [alto] 2 parámetros. Aplica un tamaño de (ancho × alto) a la imagen de fondo.

Además de unidades de medidas como píxeles o porcentajes, podemos utilizar las siguientes palabras clave:

Los dos últimos valores (cover y contain) sólo pueden utilizarse en el caso de que se especifique un sólo parámetro como valor en la propiedad background-size.

Atajo: Imágenes de fondo CSS3

Los navegadores que soportan CSS3, incluyen una nueva propiedad background de atajo que permite incluir los valores de propiedades CSS3 como background-clip, background-origin o background-size. El orden aconsejado para adquirir buenas prácticas es el siguiente:

div {
    background: <color> <position> <size> <repeat> <origin> <clip> <attachment> <image>
}

Por ejemplo:

div {
    background: #FFF top left cover repeat-x padding-box border-box scroll url(imagen.jpg);
}
Manz
Publicado por Manz

Docente, divulgador informático y freelance. Trabaja como autónomo, escribe en Emezeta.com (sitio web de tecnología con +10.000 visitas diarias) y es profesor en la Oficina de Software Libre de la Universidad de La Laguna, en Tenerife (Islas Canarias).