background
La propiedad background establece todas las propiedades del fondo en una sola declaración abreviada y puede utilizar como valor una o algunas de estas propiedades:
- background-image
- background-position
- background-size
- background-repeat
- background-attachment
- background-origin
- background-clip
- background-color
El orden recomendado en el cual estas propiedades aparecen en la declaración abreviada es el siguiente:
background: background-image background-position/ background-size background-repeat background-attachment background-origin background-clip background-color;
Generalmente los valores están separados por un espacio en blanco, pero, una barra oblicua ( / ) separa los valores para background-position y background-size.
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.
.elemento{
background:
url(imagen-de-fondo.jpg) /* background-image */
top center / 200px 200px /* background-position / background-size */
no-repeat /* background-repeat */
fixed /* background-attachment */
padding-box /* background-origin */
content-box /* background-clip */
red; /* background-color*/
}OJO
Es importante tener en cuenta que la propiedad background sobreescribe cualquier otra propiedad del background previamente declarada.
Imaginase este caso: tenemos un icono svg totalmente transparente cuyo trazado es blanco y queremos darle al elemento un fondo negro para que el icono sea visible:
.elemento {
background-color: #000;
background: url(icono.svg);
}La mala noticia es que background-color será sobreescrito por la propiedad background y si el elemento padre tiene un fondo blanco o transparente la imagen de fondo será invisible. La solución es utilizar algo así:
.elemento {
background: url(icono.svg) #000;
}o utilizar la propiedad background-image:
.elemento {
background-color: #000;
background-image: url(icono.svg);
}Múltiples imágenes de fondo
Desde 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.
background-image: url( azul1.gif ), url( verde2.gif ), url( magenta3.gif );
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.
Aunque esto puede hacerse utilizando la propiedad background-image, si queremos posicionar cada imagen de fondo en parte, tenemos que utilizar la propiedad background
background: url(azul1.gif),
url(verde2.gif) 20px 20px,
url(magenta3.gif) right bottom,
#FFF8DC; En el siguiente ejemplo, además de las tres imágenes de fondo, voy a utilizar 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;
}