Estilo atributo backgroundPosition

Definición y uso

backgroundPosition Establecer o devolver la posición de la imagen de fondo en el elemento.

Vea también:

Estilos HTML:Atributo background

Tutorial de CSS:Fondo CSS

Tutorial de CSS3:Fondo CSS3

Manual de CSS:Atributo background-image

Manual de CSS:Atributo background-position

Ejemplo

Ejemplo 1

Cambiar la posición de la imagen de fondo:

document.body.style.backgroundPosition = "top right";

intente usted mismo

Ejemplo 2

Cambiar la posición de la imagen de fondo del elemento <div> al centro inferior:

document.getElementById("myDiv").style.backgroundPosition = "center bottom";

intente usted mismo

ejemplo 3

cambiar la posición de la imagen de fondo en el elemento <div> a horizontal 200 píxeles y vertical 40 píxeles:

document.getElementById("myDiv").style.backgroundPosition = "200px 40px";

intente usted mismo

ejemplo 4

retornar la posición de la imagen de fondo en el elemento <div>:

document.getElementById("myDiv").style.backgroundPosition;

intente usted mismo

sintaxis

retornar la propiedad backgroundPosition:

object.style.backgroundPosition

establecer la propiedad backgroundPosition:

object.style.backgroundPosition = value

valor de la propiedad

valor descripción
  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right
 Si solo especifica un nombre clave, el otro valor será "center".
x% y%

El valor x representa la posición horizontal, el valor y representa 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 valor x representa la posición horizontal, el valor y representa la posición vertical.

La esquina superior izquierda es 0 0. La unidad puede ser píxeles (0px 0px) o cualquier otra unidad CSS.

Si solo especifica un valor, el otro valor será 50%. Puede mezclar % y unidades.
initial establezca esta propiedad en su valor predeterminado. Consulte initial.
inherit hereda esta propiedad del elemento padre. Consulte inherit.

detalles técnicos

valor predeterminado: 0% 0%
valor de retorno: una cadena que indica la posición de la imagen de fondo.
versión de CSS: CSS1

soporte del navegador

backgroundPosition es una característica de CSS1 (1996).

Todos los navegadores lo soportan completamente:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
soporte soporte soporte soporte soporte soporte