La Propiedad BACKGROUND-POSITION-Y

La propiedad background-position-y en CSS se utiliza para establecer la posición vertical inicial de una imagen de fondo dentro de un elemento.

La propiedad background-position-y en CSS se utiliza para establecer la posición vertical inicial de una imagen de fondo dentro de un elemento. Es una forma específica de controlar la ubicación vertical, complementaria a la propiedad background-position que puede establecer tanto la posición horizontal como la vertical.

Sintaxis Básica

La sintaxis básica para usar la propiedad background-position-y es la siguiente:

CSS
 
selector {
  background-image: url('tu-imagen.jpg'); /* Necesitas una imagen de fondo para ver el efecto */
  background-repeat: no-repeat; /* Generalmente se usa con no-repeat para ver la posición */
  background-position-y: valor;
}

Donde selector es el elemento HTML al que quieres posicionar verticalmente la imagen de fondo y valor puede ser una palabra clave, un porcentaje o una unidad de medida.

Valores de la Propiedad background-position-y

La propiedad background-position-y acepta los siguientes tipos de valores:

1. Palabras Clave (Keywords)

Puedes usar palabras clave para especificar posiciones verticales comunes:

  • top: Posiciona la imagen en la parte superior del elemento.
  • center: Centra la imagen verticalmente dentro del elemento.
  • bottom: Posiciona la imagen en la parte inferior del elemento.

Ejemplo:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 300px;
    height: 200px;
    border: 1px solid black;
    background-image: url('https://via.placeholder.com/50');
    background-repeat: no-repeat;
    margin-bottom: 10px;
  }

  .arriba { background-position-y: top; }
  .centrado { background-position-y: center; }
  .abajo { background-position-y: bottom; }
</style>
</head>
<body>

  <div class="elemento arriba">Posición Y: top</div>
  <div class="elemento centrado">Posición Y: center</div>
  <div class="elemento abajo">Posición Y: bottom</div>

</body>
</html>

2. Porcentajes (%)

Puedes usar porcentajes para especificar la posición vertical de la imagen de fondo. 0% representa la parte superior y 100% representa la parte inferior. 50% centra la imagen verticalmente.

El porcentaje representa un punto específico tanto en la imagen como en el elemento. Por ejemplo, 50% significa que el punto medio vertical de la imagen se alinea con el punto medio vertical del elemento.

Ejemplo:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 300px;
    height: 200px;
    border: 1px solid black;
    background-image: url('https://via.placeholder.com/50');
    background-repeat: no-repeat;
    margin-bottom: 10px;
  }

  .porcentaje-0 { background-position-y: 0%; }
  .porcentaje-50 { background-position-y: 50%; }
  .porcentaje-100 { background-position-y: 100%; }
</style>
</head>
<body>

  <div class="elemento porcentaje-0">Posición Y: 0%</div>
  <div class="elemento porcentaje-50">Posición Y: 50%</div>
  <div class="elemento porcentaje-100">Posición Y: 100%</div>

</body>
</html>

3. Unidades de Medida (Pixels, Em, etc.)

Puedes usar unidades de medida absolutas (como píxeles px, ems em, etc.) para especificar el desplazamiento exacto de la imagen desde el borde superior del elemento.

Ejemplo:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 300px;
    height: 200px;
    border: 1px solid black;
    background-image: url('https://via.placeholder.com/50');
    background-repeat: no-repeat;
    margin-bottom: 10px;
  }

  .pixeles-20 { background-position-y: 20px; }
  .em-1 { background-position-y: 1em; }
</style>
</head>
<body>

  <div class="elemento pixeles-20">Posición Y: 20px</div>
  <div class="elemento em-1">Posición Y: 1em</div>

</body>
</html>

4. Desplazamiento desde un Borde (con Palabras Clave)

Puedes combinar palabras clave con unidades de medida para especificar un desplazamiento desde un borde en particular.

Ejemplo:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 300px;
    height: 200px;
    border: 1px solid black;
    background-image: url('https://via.placeholder.com/50');
    background-repeat: no-repeat;
    margin-bottom: 10px;
  }

  .arriba-20px { background-position-y: top 20px; }
  .abajo-1em { background-position-y: bottom 1em; }
</style>
</head>
<body>

  <div class="elemento arriba-20px">Posición Y: top 20px</div>
  <div class="elemento abajo-1em">Posición Y: bottom 1em</div>

</body>
</html>

Relación con background-position

La propiedad background-position es una propiedad abreviada que puede establecer tanto background-position-x como background-position-y al mismo tiempo.

  • Si proporcionas un solo valor a background-position, ese valor se aplicará a la posición horizontal (background-position-x), y la posición vertical (background-position-y) se establecerá en center.
  • Si proporcionas dos valores a background-position, el primer valor se aplicará a background-position-x y el segundo a background-position-y.

Si utilizas tanto background-position como background-position-y en el mismo selector, el valor de background-position-y sobrescribirá el valor vertical establecido por background-position.

Ejemplo:

HTML
 
<!DOCTYPE html>
<html>
<head>
<style>
  .elemento {
    width: 300px;
    height: 200px;
    border: 1px solid black;
    background-image: url('https://via.placeholder.com/50');
    background-repeat: no-repeat;
    margin-bottom: 10px;
  }

  .ejemplo1 {
    background-position: top right; /* Establece ambas posiciones */
    background-position-y: bottom; /* Sobrescribe la posición vertical */
  }

  .ejemplo2 {
    background-position: 50% 20px; /* Establece ambas posiciones */
    background-position-y: 100px; /* Sobrescribe la posición vertical */
  }
</style>
</head>
<body>

  <div class="elemento ejemplo1">Posición inicial: top right, Posición Y final: bottom</div>
  <div class="elemento ejemplo2">Posición inicial: 50% 20px, Posición Y final: 100px</div>

</body>
</html>

Interacción con background-repeat

Al igual que con background-position, background-position-y determina la posición vertical inicial de la imagen de fondo cuando background-repeat está configurado en no-repeat o cuando la imagen se repite verticalmente (repeat-y).

Interacción con background-origin

La posición vertical establecida por background-position-y se calcula con respecto al origen vertical del fondo, que está determinado por la propiedad background-origin. Por defecto, el origen es el padding-box.

Casos de Uso Comunes

  • Ajustar la posición vertical de un logotipo o icono dentro de un elemento.
  • Centrar verticalmente una imagen de fondo sin afectar su posición horizontal.
  • Crear efectos visuales desplazando una imagen de fondo verticalmente.
  • Trabajar con sistemas de diseño que requieren un control preciso sobre la ubicación de los elementos de fondo.

Consideraciones

  • Utiliza background-position-y cuando necesites un control específico sobre la posición vertical de la imagen de fondo, sin modificar la posición horizontal.
  • Recuerda que si solo necesitas establecer ambas posiciones, es más conciso usar la propiedad abreviada background-position.
  • Experimenta con diferentes valores para encontrar la posición vertical exacta que mejor se adapte a tu diseño.

Conclusión

La propiedad background-position-y te ofrece un control detallado sobre la ubicación vertical de las imágenes de fondo en tus elementos CSS. Al entender cómo utilizar sus diferentes valores y cómo interactúa con otras propiedades de fondo, puedes lograr diseños más precisos y visualmente atractivos. ¡No dudes en explorar las posibilidades que te brinda esta propiedad!