Atributo background-position-y de CSS

Definición y uso

background-position-y La propiedad se utiliza para establecer la posición de la imagen de fondo en el eje y.

Consejo:Por defecto, la imagen de fondo se colocará en la esquina superior izquierda del elemento y se repetirá en las direcciones vertical y horizontal.

Ejemplo

Ejemplo 1

¿Cómo posicionar la imagen de fondo en el eje y?:

div {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-y: center;
}

Intente hacerlo usted mismo

Ejemplo 2

¿Cómo posicionar la imagen de fondo en la parte superior?:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-y: bottom;
}

Intente hacerlo usted mismo

Ejemplo 3

Cómo ubicar la imagen de fondo en el eje y usando porcentajes:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-y: 50%;
}

Intente hacerlo usted mismo

Ejemplo 4

Cómo ubicar la imagen de fondo en el eje y usando píxeles:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-y: 80px;
}

Intente hacerlo usted mismo

Sintaxis de CSS

background-position-y: value;

Valor del atributo

Valor Descripción
top Ubique la ubicación del fondo en el tope del eje y.
bottom Ubique la ubicación del fondo en el fondo del eje y.
center Ubique la ubicación del fondo en el centro del eje y.
y%

El tope del eje y es 0%, el fondo es 100%.

El porcentaje de valor indica la altura del área de ubicación del fondo del fondo menos la altura de la imagen de fondo.
ypos

Es la distancia vertical desde el tope.

La unidad puede ser píxeles (como 0px) u otros Unidades CSS.
ypos offset

sintaxis de dos valores, solo admitida en Firefox y Safari.

  • ypos Establezca top o bottom.
  • offset Es la distancia vertical entre la imagen de fondo y el tope o el fondo del ypos establecido.

La unidad puede ser píxeles u otros Unidades CSS.
initial Establezca este atributo en su valor predeterminado. Ver: initial.
inherit Hereda este atributo del elemento padre. Ver: inherit.

Detalles técnicos

Valor predeterminado: 0%
Herencia: No
Creación de animaciones: Se admite. Consulte:Atributos relacionados con la animación.
Versión: CSS3
Sintaxis de JavaScript: object.style.backgroundPositionY="center"

Compatibilidad del navegador

Los números en la tabla representan la versión del navegador que admite completamente el atributo.

Chrome Edge Firefox Safari Opera
sintaxis de un valor 1.0 12.0 49.0 1.0 15.0
sintaxis de dos valores No se admite No se admite 49.0 15.4 No se admite

Páginas relacionadas

Tutoriales:Fondo de CSS

Referencia de CSS:atributo background-image

Referencia de CSS:atributo background-position

Referencia de CSS:atributo background-position-x

Referencia del DOM de HTML:atributo backgroundPosition