Imágenes de fondo
Si no quieres un color plano de fondo, sino que prefieres utilizar una imagen, puedes utilizar la propiedad CSS 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, el navegador buscará la imagen en la misma carpeta donde está el archivo CSS. 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.
una vez establecida una imagen de fondo con background-image, se puede personalizar la forma en la que se mostrará dicha imagen mediante estas propiedades:
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 PosX y por PosY. 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%).
propiedad abreviada ('shorthand')
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:
div {
background: <color> <image> <repeat> <attachment> <position>
}
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).
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(fondo1.png), url(fondo2.jpg), url(fondo3.jpg);
background-repeat: no-repeat, repeat-x, repeat;
}
Propiedades avanzadas
Además, CSS3 también añade nuevas propiedades para especificar como cubrirá la imagen de fondo al elemento en cuestión:
background-clip: border-box | padding-box | content-box. Es el modo de relleno de la imagen de fondo
background-origin: border-box | padding-box | content-box. Es el origen del modo de relleno del fondo
background-size: [ancho] [alto]. Dos 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:
- auto: No escala la imagen. Utiliza el tamaño original de la imagen.
- cover: Escala el ancho de la imagen para adaptarse al ancho del elemento.
- contain: Escala el alto de la imagen para adaptarse al alto del elemento.
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.