Propiedad background-position-y
La propiedad background-position-y establece
la posición vertical de la imagen de fondo de un elemento.
La propiedad puede tomar los siguientes valores:
top, center, bottom, y también
se puede especificar la posición del fondo en porcentajes
o píxeles.
Sintaxis
selector {
background-position-y: valor;
}
Ejemplo
Coloquemos la imagen de fondo en la parte superior verticalmente:
<div id="elem"></div>
#elem {
background-position-y: top;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Ejemplo
Ahora movamos el fondo al centro:
<div id="elem"></div>
#elem {
background-position-y: center;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Ejemplo
Ahora especifiquemos la posición del fondo en porcentaje:
<div id="elem"></div>
#elem {
background-position-y: 80%;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Ver también
-
la propiedad
background,
que es una propiedad abreviada para el fondo -
la propiedad
background-position-x,
que establece la posición horizontal del fondo