Imagen de fondo
Para cubrir el fondo de la página web o de cualquier elemento dentro de ella no estamos limitados a colores uniformes o gradientes de color, se pueden usar una o más imagenes. Si usas el formato png o gif estas imag´nes pueden ioncluso tener zonas transparentes que permiten ver lo que hay debajo.
El funcionamiento es muy simple: la imagen se usa como un patrón que al repetirse puede cubrir todo el fondo de un elemento.
Con CSS3 se pueden incluso utlilizar varias imágenes para crear un fondo, y también se puede utilizar como fondo parte de una imagen. Esta opción añade a las propiedades de los fondos de color las siguientes propiedades extra:
| Propiedad | Uso | |
|---|---|---|
| background-attachment | Indica si el fondo es fijo o se desplazará al hacer desplazar la página | fixed, scroll |
| background-image | Imágenes o gradientes de color usadas para el fondo | Url,s separadas por comas |
| background-origin | Referencia para la posición de la imagen de fondo | boder-box, padding-box, content-box |
| background-position | Posición de la imagen donde se inicia el fondo | Valor numérico o descriptivo (left. right...) |
| background-repeat | Modo de repetición de la imagen de fondo para cubrirlo completo | repeat, repeat-x, repeat-y, space, no-repeat, round |
| background-size | Tamaño de la imagen del fondo | auto, medida, %, cover, contain |
A veces creamos la relga para la imagen de fondo pero no se. En estos casos hay que asegurarse de que la URL apunte a la dirección correcta. Ten en cuenta la url de la imagen es interpretada con una url relativa al lugar donde está el archivo CSS.
Lo más fácil es ver todo esto mediante ejemplos. Lo primero es elegir la imagen que vamos a uilizar para el fondo de un contenedor por ejemplo
.fondoder{
background-image = url('fondo1.jpg');
background-attachment: scroll;
}
.fondoizq{
background-image = url('fondo1.jpg');
background-attachment: fixed;
}
Al desplazarte en vertical con la barra de scroll de la ventana del navegador verás que en la ventana izquierda el fondo está fijo, mientras que en la derecha se desplaza con el cuadro. El fondo con la propiedad background-attachment: fixed queda como por debajo de la hoja y el cuadro aparenta una ventana.
Si tienes una imagen pequeña para un fondo grande, por defecto esa imagen se repetirá a lo alto y ancho del elemento para cubrirlo por entero, salvo que uses la propiedad repeat para que no se repita o se repita solo en una dirección: horizontal o vertical. En este ejemplo tenemos una imagen cuadrada de 45px de lado para cubrir el fono del contenedor div
<div style="background-image = url('fondo2.jpg'); background-repeat: repeat;">
Repetición del patrón
</div>
<div style="background-image = url('fondo2.jpg'); background-repeat: repeat-x;">
Repetir solo en horizontal
</div>
Ya ves como al repetir el patrón de fondo en horizontal se ven las imagenes repetidas pero quedan arriba, puedes bajarlo con background-position, esta propiedad es un atajo a bacground-position-x y backgroun-position-y. Permite especificar donde debe situarse el fondo. y por donde comenzar la repetición si la hubiera. e pueden usar valores numericos (aboluos o porcentajes) y descriptivos como top, bottom, left, right, center
<div style="background-image = url('fondo2.jpg'); background-position: center;">
Contenido del cuadro
</div>
<div style="padding:25px; background-image = url('fondo1.jpg'); background-origin: conteng-box;">
Contenido del cuadro
</div>
El primer ejemplo el patrón no se repite y se situa en el centro del cuadro (background-position: center) La segunda usa una imagen sin repetición que comienza en la esquina de la zona de contenido de la caja, para verlo le he colocado un relleno ancho.
Las propiedades del fondo de color uniforme siguen siendo aplicables cuando usamos una imagen, incluso aparece la posibilidad de controlar como se mezcla el color de fondo con la imagen usando la propiedad background-blend, que controla como se mezclan colores cuando se supperponen. Aplicable también cuando se usan varias imágnes de fondo superpuestas. Puedes ver los diferentes modos en este cuadro con un fondo color rojo (background-color: red) una imagen como patrón sin repetición (background-repeat: no-repeat) en el centro (background-position: center).
Es posible utilizar varias imágenes como fondo de un elemento. El sistema es simple, en la propiedad background-image en lugar de escribir una única url() se escriben varias separadas por comas. Las imágenes se superponen de manera que la úlitma escrita la que queda bajo las siguientes. Las restantes proiedades se especifican con el mismo método, lístas de valroes separadas por comas en el mismo orden en que se escribieron las imágenes. Cada valor de la lista corresponde a una de las imágenes. Si se escribe un solo valor se aplica a todas las imágenes que forman el fondo:
background-image:
url('images/fondo-blend1.png'), url('images/fondo2.png');
background-repeat: no-repeat, repeat;
background-position: center, top left;
En cuanto al tamaño de la imagen hay dos valores que a veces se confunden: cover y contain
El primero (background-size:cover) redimensiona la imagen para que ocupe todo el fondo del contendor donde se aplica.
El segundo valor (background-size:contain) también redimensiona la imagen, pero en este caso para asegurarse que se ve al completo.
En ambos casos si el redimensionado implica un aumento de tamaño demasiado grande la calidad se va a resentir. Lo ideal es usar un tamaño adecuado al contnedor que se quiera cubrir
Las imágenes como fondo de los elementos en la web deben usarse de acuerdo con el contenido del elemento. Si existe texto hay que asegurarse que el contraste es suficiente para leer sin distracciones, una imagen de color muy pálido es la mejor opción.