Atributo background-position de CSS
- Página anterior background-origin
- Página siguiente background-position-x
Definición y uso
background-position La propiedad configura la posición de inicio de la imagen de fondo.
Esta propiedad configura la imagen original de fondo (por background-image La ubicación de la definición (definición)的位置，si la imagen de fondo se repetirá, comenzará desde este punto.
Consejo:Necesita establecer el atributo background-attachment en "fixed“，para garantizar que la propiedad funcione correctamente en Firefox y Opera.
Vea también:
Tutorial de CSS:Fondo de CSS
Manual de referencia de CSS:Atributo background-image
Manual de referencia de HTML DOM:Atributo backgroundPosition
Ejemplo
Cómo ubicar la imagen de fondo:
body
{
background-image:url('bgimage.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
Sintaxis CSS
background-position: value;
Valor de la propiedad
| Valor | Descripción |
|---|---|
|
Si solo especifica una palabra clave, el segundo valor será "center". Valor predeterminado: 0% 0%. |
| x% y% |
El primer valor es la posición horizontal, el segundo valor es la posición vertical. La esquina superior izquierda es 0%. La esquina inferior derecha es 100% 100%. Si solo especifica un valor, el otro valor será 50%. |
| xpos ypos |
El primer valor es la posición horizontal, el segundo valor es la posición vertical. La esquina superior izquierda es 0 0. La unidad es píxeles (0px 0px) o cualquier otra unidad CSS. Si solo especifica un valor, el otro valor será 50%. Puede combinar % y valores de position. |
Detalles técnicos
| Valor predeterminado: | 0% 0% |
|---|---|
| Herencia: | no |
| Versión: | CSS1 |
| Sintaxis de JavaScript: | object.style.backgroundPosition="center" |
Más ejemplos
- Cómo usar % para ubicar la imagen de fondo
- Este ejemplo muestra cómo usar porcentajes para ubicar la imagen de fondo en la página.
- Cómo usar píxeles para ubicar la imagen de fondo
- Este ejemplo muestra cómo usar píxeles para ubicar la imagen de fondo en la página.
Compatibilidad del navegador
La tabla de números indica la primera versión del navegador que admite completamente la propiedad.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | IE / Edge | Firefox | Safari | Opera |
| 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
- Página anterior background-origin
- Página siguiente background-position-x
