Propiedad de fondo CSS
Ejemplo
Establezca diferentes propiedades de fondo en una declaración:
body
{
background: lightblue url("img_tree.gif") no-repeat fixed center;
}
Definición y uso
La backgroundpropiedad es una propiedad abreviada para:
- color de fondo
- imagen de fondo
- posición de fondo
- tamaño de fondo
- repetición de fondo
- fondo-origen
- clip de fondo
- archivo adjunto de fondo
No importa si falta uno de los valores anteriores, por ejemplo, background:#ff0000 url(smiley.gif); esta permitido.
| Valor por defecto: | ver propiedades individuales |
|---|---|
| Heredado: | No |
| Animable: | si, ver propiedades individuales . Leer sobre animable |
| Versión: | CSS1 + nuevas propiedades en CSS3 |
| Sintaxis de JavaScript: | object .style.background="url rojo(smiley.gif) arriba a la izquierda sin repetición" |
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
| Property | |||||
|---|---|---|---|---|---|
| background | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Nota: consulte el soporte de navegador individual para cada valor a continuación.
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 abreviada es la propiedad de tamaño de bg, debe usar una / (barra oblicua) para separarla de la propiedad de posición de bg, por ejemplo, background:url(smiley.gif) 10px 20px/50px 50px ; dará como resultado una imagen de fondo, posicionada 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 y 50 píxeles de alto.
Nota: si usa varias fuentes de imagen de fondo pero también desea un color de fondo, el parámetro de color de fondo debe ser el último en la lista.
Valores de propiedad
| Value | Description | CSS |
|---|---|---|
| background-color | Specifies the background color to be used | 1 |
| background-image | Specifies ONE or MORE background images to be used | 1 |
| background-position | Specifies the position of the background images | 1 |
| background-size | Specifies the size of the background images | 3 |
| background-repeat | Specifies how to repeat the background images | 1 |
| background-origin | Specifies the positioning area of the background images | 3 |
| background-clip | Specifies the painting area of the background images | 3 |
| background-attachment | Specifies whether the background images are fixed or scrolls with the rest of the page | 1 |
| initial | Sets this property to its default value. Read about initial | 3 |
| inherit | Inherits this property from its parent element. Read about inherit | 2 |
páginas relacionadas
Tutorial CSS: Fondo CSS , Fondos CSS (avanzado)
Referencia HTML DOM: propiedad de fondo