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;

}

Este fondo de imagen se moverá al hacer scroll, o sea, al desplazarse con las barras laterales. Habitualmente se usa en los cuerpos de la página web, pero nada impide usarlo en cualquier otro contenedor en el que se defina un fondo de imagen. Pero solo obedece a las barras de scroll de la ventana del navegador. Como este cuadro que estás viendo.
Este fondo de imagen se moverá al hacer scroll, o sea, al desplazarse con las barras laterales. Habitualmente se usa en los cuerpos de la página web, pero nada impide usarlo en cualquier otro contenedor en el que se defina un fondo de imagen. Pero solo obedece a las barras de scroll de la ventana del navegador. Como este cuadro que estás viendo.

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>

Repetición del patrón
Repetir solo en horizontal, repeat-x

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>

Sin repetir y en el centro
Origen del fondo

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:

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.