La propiedad background-image se puede aplicar a una gran cantidad de etiquetas y consigue que se muestre una imagen de fondo.
Su formato es el siguiente, aplicada por ejemplo al cuerpo de la página:
body { background-image: url("images/fondo.png"); }
Repeticiones
No siempre nos va a interesar que la imagen se reproduzca indefinidamente. Por ello, a continuación de la url podemos indicar el modo de repetición a través de la propiedad background-repeat:
- repeat: para que se repita. Es el valor predefinido, por lo que lo podemos omitir.
- repeat-x: para que sólo se repita horizonalmente, no verticalmente.
- repeat-y: para que se repita en el eje vertical.
- no-repeat: para que no se repita nunca.
Por ejemplo, para que sólo se repita verticalmente añadiríamos esta línea:
body {
background-color: #DEB0A0;
background-image: url("images/etching-small.jpg");
background-repeat: repeat-y;
}
El resultado es que la imagen sólo aparece en el eje vertical.
Fondo fijo
Todavía podemos mejorar el conjunto. En los casos en los que la imagen no debe ocupar todo el fondo podemos emplear la propiedad background-attachment para controlar la posición de la imagen, con los siguientes valores:
- scroll: la imagen se desplazará al desplazarnos arriba y abajo cuando el documento sea largo. Es el valor predeterminado.
- fixed: la imagen se queda fija aunque nos desplacemos hacia abajo.
- local: similar al anterior, aunque la imagen está fijada al contenido del elemento en lugar de al propio elemento.
Para comprender el uso de esta propiedad, lo mejor es probar esta regla:
body {
background-color: #DEB0A0;
background-image: url("images/etching-small.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
}
Al bajar en el documento veremos como la imagen se queda fija en el fondo, en lugar de desaparecer, que sería el comportamiento estándar.
Colocación del fondo
La propiedad background-position se emplea para ubicar el fondo a nuestro gusto, mediante los valores x e y, ya sea en formato de píxeles, mediante porcentajes o mediante indicaciones de posición (center, top, bottom, right o left).
Por ejemplo, probaremos esta regla:
body {
background-color: #DEB0A0;
background-image: url("images/etching-small.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom right;
}
La imagen se ha desplazado a la esquina inferior derecha (bottom right).
Si estamos empleando una imagen como fondo de un bloque o un elemento similar y la imagen es más grande que el elemento que la va a contener podemos emplear los valores cover (ajusta la imagen al bloque sin deformarla) o contain (reduce la imagen para ajustarla al bloque, también sin deformarla).
La propiedad background
Como sucedía con la propiedad font, podemos fusionar todas las propiedades relacionadas con los fondos en una sola mediante background.
El ejemplo que hemos venido realizando se podría expresar también de esta manera:
body {
background: #DEB0A0 url("images/etching-small.jpg") no-repeat fixed bottom right;
}
En primer lugar indicamos el color de fondo, si no queremos que aparezca ningún color indicaremos el término transparent. Luego viene la dirección de la imagen, seguida de los diferentes parámetros que hemos visto.