Paginas Css Propiedades

http://www.librosweb.es/referencia/css/background-image.html

http://www.librosweb.es/referencia/css/











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 cincopropiedades 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 decada 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 usohabitual 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-repeaturl("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 buenaprá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á demasiadoel 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.


La propiedad background-attachment controla si la imagen de fondo establecida en un elemento se mueve o permanece fija cuando se hace scroll en la ventana del navegador.


Por defecto,...