Ejemplo
Establecer diferentes propiedades de fondo en una declaración:
body
{
background: #00ff00 url("smiley.gif") no-repeat fixed center;
}
Inténtalo tú mismo " Definición y Uso
El fondo de propiedad abreviada establece todas las propiedades de fondo en una declaración.
Las propiedades que se pueden configurar son: color de fondo, imagen de fondo, background-position, el fondo de tamaño, background-repeat, el origen de origen, el origen de clip y background-attachment.
No importa si uno de los valores anteriores están desaparecidos, por ejemplo, background: # ff0000 url(smiley.gif) ; esta permitido.
| Valor por defecto: | see individual properties |
|---|---|
| Heredado: | no |
| animatable: | yes, see individual properties . Read about animatable Try it |
| Versión: | CSS1 + new properties in CSS3 |
| la sintaxis de JavaScript: | object .style.background="red url(smiley.gif) top left no-repeat" Try it |
Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
| Propiedad | |||||
|---|---|---|---|---|---|
| background | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Note: Internet Explorer 8 y versiones anteriores no son compatibles con múltiples imágenes de fondo de un elemento.
Nota: Consulte la ayuda del navegador individual para cada valor por debajo.
sintaxis CSS
background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;Nota: Si una de las propiedades en la declaración de la taquigrafía es la propiedad bg-tamaño, debe utilizar una / (slash) para separarlo de la propiedad-bg posición, por ejemplo, background:url(smiley.gif) 10px 20px / 50px 50px ; dará como resultado una imagen de fondo en, posicionado 10 píxeles desde la izquierda, 20 píxeles desde la parte superior, y el tamaño de la imagen será de 50 píxeles de ancho por 50 píxeles de alto.
Nota: Si se utiliza múltiples fuentes Imagen de fondo pero también quieren un color de fondo, el parámetro background-color tiene que ser el último en la lista.
Valores de propiedad
| Valor | Descripción | CSS |
|---|---|---|
| background-color | Especifica el color de fondo que se utilizará | 1 |
| background-image | Especifica una o más imágenes de fondo que se utilizará | 1 |
| background-position | Especifica la posición de las imágenes de fondo | 1 |
| background-size | Especifica el tamaño de las imágenes de fondo | 3 |
| background-repeat | Especifica cómo repetir las imágenes de fondo | 1 |
| background-origin | Especifica el área de posicionamiento de las imágenes de fondo | 3 |
| background-clip | Especifica el área de la pintura de las imágenes de fondo | 3 |
| background-attachment | Especifica si las imágenes de fondo se fijan o se desplaza con el resto de la página | 1 |
| inicial | Establece esta propiedad a su valor por defecto. Lea acerca inicial | 3 |
| heredar | Hereda esta propiedad de su elemento padre. Lee sobre heredar | 2 |
Páginas relacionadas
CSS tutorial: Antecedentes CSS
CSS3 tutorial: Fondos de CSS3
Referencia HTML DOM: background property