Curso Completo de CSS de principiante a avanzado - CURSO de CSS - 43 ¿Como POSICIONAR una IMAGEN de FONDO con CSS?

Puntos Clave de la Lección

• Introducción a background-position: La propiedad permite definir la ubicación de una imagen dentro de su contenedor. Por defecto, el navegador aplica el valor top left (arriba a la izquierda). [00:00:38]
• Uso de coordenadas (Ejes X e Y): Se utilizan términos como left, right, center (para el eje horizontal) y top, bottom, center (para el eje vertical). [00:01:21]
• Combinación de coordenadas: Es posible posicionar la imagen especificando un valor para cada eje. Por ejemplo, bottom right ubicará la imagen en la esquina inferior derecha. [00:03:18]
• Uso de unidades de medida: Se pueden utilizar píxeles para desplazar la imagen desde una posición base. Valores positivos desplazan la imagen hacia el lado contrario de la referencia, mientras que los valores negativos se mueven hacia la coordenada indicada. [00:04:02]
• Uso de porcentajes: El empleo de porcentajes permite un posicionamiento relativo al tamaño del elemento, funcionando de manera similar a las unidades de medida fijas en cuanto a la lógica de los ejes. [00:05:38]

Productos útiles para este curso

Resumen Final

Dominar background-position es esencial para cualquier maquetador web. Se ha aprendido que la propiedad funciona bajo dos ejes (X e Y) y que el posicionamiento se puede determinar mediante palabras clave descriptivas, unidades de medida absolutas como los píxeles, o valores relativos como porcentajes. La práctica constante con valores positivos y negativos es clave para comprender cómo el navegador calcula el espacio restante y desplaza la imagen en consecuencia, permitiendo interfaces más dinámicas y bien estructuradas.

Créditos del Autor

Esta lección ha sido adaptada del contenido original creado por el canal, especializado en desarrollo web y enseñanza de lenguajes de programación. Se recomienda visitar su canal oficial de YouTube para profundizar en estos contenidos.