Propiedad CSS background-position-y
La propiedad CSS background-position-y especifica la posición vertical de una imagen de fondo. Ve ejemplos y pruébalos tú mismo.
La propiedad CSS background-position-y establece la posición vertical de una imagen de fondo dentro de su elemento. Es la mitad vertical de la abreviatura background-position: mientras que background-position toma tanto un valor horizontal como uno vertical, background-position-y controla únicamente la ubicación arriba/abajo, dejando la colocación izquierda/derecha a background-position-x.
Se utiliza cuando se desea ajustar la posición vertical de una imagen de fondo sin redeclarar el valor horizontal — por ejemplo, fijar una marca de agua en la parte inferior de una sección hero, o afinar dónde comienza un patrón. Cuando un elemento tiene varias imágenes de fondo, se puede asignar un valor por capa, separados por comas, y cada valor se corresponde con la imagen respectiva.
El desplazamiento vertical se mide respecto al área de posicionamiento del fondo (por defecto, el cuadro de relleno del elemento). Una longitud cuenta desde el borde superior hacia abajo; un porcentaje alinea puntos coincidentes en la imagen y en el área (ver Valores más adelante).
Los valores negativos son válidos — background-position-y: -20px desplaza la imagen hacia arriba, más allá del borde superior.
| Valor inicial | top |
|---|---|
| Se aplica a | Todos los elementos. |
| Heredada | No. |
| Animable | No. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.backgroundPositionY = "bottom"; |
Sintaxis
Valores de CSS background-position-y
background-position-y: top | center | bottom | length | percentage | initial | inherit;Ejemplo de la propiedad background-position-y con el valor "top":
Ejemplo de código CSS background-position-y
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
min-height: 100vh;
}
body {
padding-top: 30px;
background: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") no-repeat;
background-position-y: top;
}
</style>
</head>
<body>
<h2>Background-position-y property example</h2>
</body>
</html>Resultado
Ejemplo de la propiedad background-position-y con el valor "bottom":
Ejemplo de CSS background-position-y bottom
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
min-height: 100vh;
}
body {
background: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") no-repeat;
background-position-y: bottom;
}
</style>
</head>
<body>
<h2>Background-position-y property example</h2>
</body>
</html>Ejemplo de la propiedad background-position-y con el valor "center":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
min-height: 100vh;
}
body {
background: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") no-repeat;
background-position-y: center;
}
</style>
</head>
<body>
<h2>Background-position-y property example</h2>
</body>
</html>Ejemplo de la propiedad background-position-y con el valor "length":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
min-height: 100vh;
}
body {
padding-top: 30px;
background: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") no-repeat;
background-position-y: 90px;
}
</style>
</head>
<body>
<h2>Background-position-y property example</h2>
</body>
</html>Ejemplo de la propiedad background-position-y con el valor "percentage":
Los porcentajes se comportan de manera distinta a las longitudes. Con una longitud como 90px, el borde superior de la imagen se coloca 90px por debajo del borde superior del área. Con un porcentaje, el punto situado al N% de la imagen se alinea con el punto al N% del área — de modo que 0% equivale a top, 100% a bottom y 50% a center. Esto es lo que permite que los valores de porcentaje mantengan visible una imagen sobredimensionada independientemente de la altura del contenedor.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
min-height: 100vh;
}
body {
padding-top: 30px;
background: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") no-repeat;
background-position-y: 70%;
}
</style>
</head>
<body>
<h2>Background-position-y property example</h2>
</body>
</html>Valores
| Valor | Descripción |
|---|---|
| top | Especifica la alineación del borde superior de la imagen de fondo con el borde superior de la capa de posicionamiento del fondo. |
| center | Especifica la alineación del centro de la imagen de fondo con el centro de la capa de posicionamiento del fondo. |
| bottom | Especifica la alineación del borde inferior de la imagen de fondo con la parte inferior de la capa de posicionamiento del fondo. |
| length | Especifica el desplazamiento vertical de la imagen de fondo desde el borde superior de la capa de posicionamiento del fondo. |
| percentage | Especifica el desplazamiento vertical de la imagen de fondo relativo al contenedor. 0% alinea el borde superior de la imagen de fondo con el borde superior del contenedor, 100% alinea el borde inferior con el borde inferior del contenedor, y 50% centra verticalmente la imagen de fondo. |
| initial | Establece la propiedad en su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento padre. |
Propiedades relacionadas
background-position— establece la posición horizontal y vertical juntas en una sola declaración.background-position-x— el equivalente horizontal de esta propiedad.- Propiedades CSS3 — resumen de las propiedades introducidas en CSS3.