w3.unpo<code>todo

w3.unpocodetodo.info

Múltiples imágenes de fondo

En el CSS3 podemos utilizar varias imágenes de fondo para un solo elemento. Para esto tenemos que separar los url de las varias imágenes con una coma.

#multiple.bgmultiple{
	width:150px; 
	height:150px; 
	border:1px solid #d9d9d9;
	background-repeat: no-repeat;
	} 
#multiple {
  background-image: url(images/azul1.gif), url(images/verde2.gif), url(images/magenta3.gif);
  background-position: 10px 10px;
}

El orden de apilamiento

Las imágenes aparecen apiladas, una encima de otra, de esta manera: la primera imagen ( azul1.gif ) esta encima de la segunda ( verde2.gif ), que esta encima de la tercera ( magenta3.gif ) y así sucesivamente.

Podemos posicionar cada imagen de fondo en parte, pero para esto tenemos que utilizar la propiedad background.

Declaraciones abreviadas

La propiedad background establece todas las propiedades del fondo en una sola declaración abreviada. Estas propiedades son: background-color, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment, y background-image.

Son muchas propiedades que por suerte podemos combinar utilizando la siguiente sintaxis.

Generalmente los valores están separados por un espacio en blanco, pero, una barra oblicua ( / ) separa los valores para background-position y background-size.

background: bg-color bg-position/ bg-size bg-repeat bg-origin bg-clip bg-attachment bg-image;

Hay que subrayar que podemos declarar el valor para background-size solo si el valor para background-position aparece en la declaración abreviada. Podemos omitir el valor para background-size, o podemos omitir los dos valores.

En lo que concierne a los valores para background-origin y background-clip: sabemos que las dos propiedades utilizan las mismas palabras clave:  border-box, padding-box y content-box. CSS nos permite utilizar un solo valor para las dos propiedades si así lo deseamos. También podemos omitir los dos valores.

De los demás valores podemos omitir sin problemas a los que no necesitamos.

En el siguiente ejemplo queremos utilizar tres imágenes de fondo. Podemos posicionar cada imagen de fondo en parte utilizando la propiedad background.

background: url(images/azul1.gif), url(images/verde2.gif) 20px 20px, url(images/magenta3.gif) right bottom, #FFF8DC;

Además de las tres imágenes de fondo, utilizamos un color de fondo ( #FFF8DC ) que aparece después de una coma al final de la declaración para background.

#posicionadas.bgmultiple {
  width: 150px;
  height: 150px;
  border: 1px solid #d9d9d9;
  background: url(images/azul1.gif), url(images/verde2.gif) 20px 20px, url(images/magenta3.gif) right bottom, #FFF8DC;
  background-repeat: no-repeat;
}