Cuando visitamos una página web vemos imágenes, textos, tablas... todos esos elmento están situados sobre un fondo. Es como si estuvieras escribiendo en un papel. El papel es el fondo y puede tener colores o tener una imagen al agua. Pero además puedes escribir difernetes párrafos con distibntos colores de fondo o escribir en un cuadro cuyo fono sea una imagen.
En el lenguaje CSS el fondo de cualqer elemento de la página se define mediante la propiedad background . Es una propiedad compuesta, aunque se puede definir usando la abreviaturas típicas de CSS.
Un fondo puede crearse con:
- una superficie de color uniforme o degradados
- a paritr de una o más imágenes
En general, la propiedad background es un atajo para definir los valores individuales de todas las propiedades del fondo en una sola declaración CSS abreviada. Se puede usar background para definir los valores de una o de todas las propiedades siguientes:
- background-image - background-position - background-size - background-repeat - background-attachment - background-origin - background-clip - background-color
La propiedad background es una forma rápida para las propiedades más específicas relacionadas con background. Algunos ejemplos de declaraciones de background:
BODY { background: white url(http://www.htmlhelp.com/foo.gif) }
BLOCKQUOTE { background: #7fffd4 }
P { background: url(../fondos/peon.png) #f0f8ff fixed }
TABLE { background: #0c0 url(hojas.jpg) no-repeat bottom right }
Un valor no especificado recibirá el valor inicial. Por ejemplo, en las tres primeras reglas de arriba, la propiedad background-position será establecida a 0% 0%.
Para ayudar a evitar conflictos con hojas de estilo del usuario, siempre deberían especificarse juntas las propiedades background y 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;
Para definir un fondo lo primero que necesita CSS es saber que parte del contenedor se va a aplicar el fondo. Puede que cubra todo el bloque entre los bordes, o que solo se rellene el contenido o se incluya el relleno. Esto se define con background-clip
Si usas como valor border-box (el valor por defecto) el fondo inlcuirá todo el bloque, si le das como valor padding-box el fondo ocupar la parte del relleno y el contendio y si usas el valor conten-box, solo rellenará la parte de contendio, el borde y el relleno quedan fuera.
Las tres posibilidades
En los tres ejemplos se ha usado el mismo estilo, la única diferencia está en el valor de background-clip. Los valores padding-box y border-box no presentan diferencia si se utiliza un borde con color. El estilo usado para los tres bloques ha sido:
width:300px;
margin:10px;
padding:10px;
border: 20px solid transparent;
background-color: lightblue;
background-clip: border-box /*content-box o padding-box, según el caso*/
La linea alrededor no es un borde es un outbox para mostrar con más claridad la diferencia entre los tres posibles valores. Ambas propiedades se pueden asignar con el modo abreviado background, en este caso background: lightblue padding-box por ejemplo.
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*/
}
Definición
| Definición | Establece algunas o todas las propiedades del color y/o imagen de fondo de un elemento |
|---|---|
| Valores permitidos | Alguno o todos los siguientes valores y en cualquier orden: |
| Si se utilizan porcentajes, hace referencia a la anchura del propio elemento (sólo se pueden utilizar en la propiedad background-position) | |
| Valor inicial | Cada propiedad define su propio valor por defecto |
| Se aplica a | Todos los elementos |
| Válida en | medios visuales |
| Se hereda | no |
| Definición en el estándar | w3.org/TR/CSS21/colors.html#propdef-background |
Sintaxis
/* Usando <background-color> */
background: green;
/* Usando <bg-image> y <repeat-style> */
background: url("test.jpg") repeat-y;
/* Usando <box> and <background-color> */
background: border-box red;
/* Una sola imagen, centrada y escalada */
background: no-repeat center/80% url("../img/image.png");
La propiedad background se especifica como una o más capas de fondo, separadas por comas.
La sintaxis de cada capa es la siguiente:
- Cada capa puede incluir cero o una ocurrencia de cualquiera de los siguientes valores
- El valor
<bg-size>sólo puede ser incluido inmediatamente después de la <position>, separado con el carácter '/', así: "center/80%". - El valor <box> puede ser incluido cero, una o dos veces. Si se incluye una vez, establece ambos
background-originybackground-clip. Si se incluye dos veces, la primera ocurrencia establecebackground-origin, y el segundo conjuntobackground-clip. - El valor
<background-color>sólo puede ser incluido en la última capa especificada.
Valores
- background-color
- ver
color. - background-image
- ver
image. - background-repeat
- ver
repeat. - background-attachment
- ver
background-attachment. - background-position
- ver
position.
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);
}
Ejemplos de uso
La propiedad background es una de las "propiedades shorthand" que define CSS y que se utilizan para establecer de forma abreviada el valor de una o más propiedades individuales. En concreto, background permite establecer simultáneamente las cinco propiedades relacionadas con el color e imagen de fondo de cada elemento.
Gracias a la propiedad background se puede establecer de forma directa el color de fondo (background-color), la imagen de fondo (background-image), su posición (background-position), si la imagen es fija o no (background-attachment) y/o si la imagen se repite o no (background-repeat). Puedes consultar la documentación de cada propiedad individual para acceder a sus ejemplos de uso.
En ocasiones, la propiedad background se utiliza simplemente para establecer el color de fondo de un elemento, ya que es más corto de escribir que la propiedad background-color. De esta forma, las dos reglas CSS siguientes producen el mismo efecto:
div {
background-color: #CCC;
}
div {
background: #CCC;
}
El uso habitual de la propiedad background es el de mostrar una imagen de fondo en un elemento y simultáneamente establecer las propiedades de esa imagen (si se repite o no, su posición y si es fija o no). Las dos reglas CSS siguientes son equivalentes, pero la segunda es mucho más compacta:
div {
background-image: url("images/imagen_pequena.png");
background-repeat: no-repeat;
background-position: 2em 1.5cm;
background-attachment: fixed;
}
div {
background: url("images/imagen_pequena.png") no-repeat 2em 1.5cm fixed;
}
Como es habitual en las "propiedades shorthand", se puede establecer uno, varios o todos los valores permitidos:
div {
background: url("images/imagen_pequena.png") no-repeat;
}
div {
background: url("images/imagen_pequena.png") no-repeat fixed;
}
div {
background: url("images/imagen_pequena.png") 10px 20px no-repeat;
}
div {
background: url("images/imagen_pequena.png") top repeat-y scroll;
}
Como el orden de cada propiedad individual dentro de background es indiferente, todas las declaraciones CSS siguientes son correctas y equivalentes:
background: url("images/imagen_pequena.png") no-repeat 2em 1.5cm fixed;
background: fixed url("images/imagen_pequena.png") no-repeat 2em 1.5cm;
background: no-repeat fixed url("images/imagen_pequena.png") 2em 1.5cm;
background: 2em 1.5cm url("images/imagen_pequena.png") no-repeat fixed;
background: no-repeat 2em 1.5cm fixed url("images/imagen_pequena.png");
background: 2em 1.5cm url("images/imagen_pequena.png") fixed no-repeat;
background: no-repeat url("images/imagen_pequena.png") 2em 1.5cm fixed;
background: fixed 2em 1.5cm url("images/imagen_pequena.png") no-repeat;
Cuando se establece un color de fondo y una imagen de fondo a un mismo elemento, la imagen tiene prioridad. Por ello, el color sólo se ve en las zonas transparentes de la imagen y en las zonas del elemento que no están cubiertas por la imagen de fondo.
No obstante, es una buena práctica establecer un color de fondo siempre que se establezca una imagen de fondo. El motivo es que cuando los navegadores se descargan las imágenes de fondo, se pueden producir errores que impidan obtener la imagen.
Así, si se ha establecido un color de fondo similar a la imagen de fondo que no se puede mostrar, el usuario apenas notará la diferencia y el diseño de la página no sufrirá demasiado el error producido. Cuando la imagen de fondo es muy compleja y no se puede escoger un color similar, se recomienda establecer un color de fondo adecuado para leer el texto que pueda contener el elemento.
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. Seguidamente, el CSS y el HTML, respectivamente, del ejemplo en cuestión:
background-image: url( img1.gif ),url( img2.gif ),url( img3.gif );
<div class="resultado" id="posicionadas"> <p><img src="img1.gif "></p> <p><img src="img2.gif "></p> <<p><img src="img3.gif "></p> </div>
Las imágenes aparecen apiladas, una encima de otra, de esta manera: la primera imagen ( img1.gif ) está encima de la segunda ( img2.gif ), que está encima de la tercera ( img3.gif ) y así sucesivamente; el resultado es este:
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(img1.gif),
url(img2.gif) 20px 20px,
url(img3.gif) right bottom,
#f2f2f2;
En el siguiente ejemplo, con dos 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.
#imgposicionadas.bgmultiple {
width: 150px;
height: 150px;
border: 1px solid #d9d9d9;
background: url(images/azul1.gif),
url(verde2.gif) 20px 20px,
#FFF8DC;
background-repeat: no-repeat;
}
El HTML es el siguiente:.
<div class="bgmultiple" id="imgposicionadas"></div>
El resultado es el siguiente:.
Los colores y gradientes
El fondo más simple de definir es el fondo con un color simple que lo cubra por completo. Tan solo hay que asignar el color que se quiera usar a la propiedad background-color. Pero CSS3 tambien nos permite utilizar gradientes de color, transiciones entre varios colores sin necesidad de utilizar imágenes. Existen gradientes lineales y gradientes radiales, que a su vez pueden repetirse como un patrón.
Un gradiante o degradado es una transición gradual entre colores, por tanto para definirlo se necesita indicar como mínimo dos colores: el inicial y el final (pueden ser el mismo pero con distinta trasnparencia). Se pueden definir más para crear una degradado multicolor. Por defecto cada color del gradiente se reparte por igual entre todos los colores que lo forman, pero esto se puede modificar indicando donde acaba cada color y comienza el siguiente, esto se logra usando un distancia al origen del degradado usando valor absoluto o un porcentaje del tamaño del fondo a cubrir.
El origen del degradado es el lugar desde donde comienza a producrise el cambio de colores, en un degradado radial serín un punto central y en uno lineal será una linea.
En cualquier tipo de gradiente los colores se especifican como una lista de colores (código o nombre) que pueden ir seguidos de una medidas (absolutas o porcentajes) sobre el lugar donde finaliza el color en el degradado:
background-image : radial-gradient(circle, red, orange 10%, yellow 20%);
background-image : linear-gradient(to bottom, rgba(255,0,0,0), rgba(255,0,0,1);
Se pueden usar transiciones con transparencias usando un único color con valores distintos para su opacidad, en el último ejemplo se pasa de un rojo transparente rgba(255,0,0,0) a un rojo totalmente opaco rgba(255,0,0,1).
