Actualmente estoy revisando el banner de un sitio web a través de las herramientas de desarrollo de Chrome (Inspeccionar). Noté que un banner en particular tiene el siguiente conjunto de reglas en su CSS:
banner{ background-position:bottom; background-position-x: center; background-position-y: center; } ¿Es esto sólo una formalidad?. Porque, cuando eliminé las tres propiedades de fondo y configuré background-position: center , el banner no se vio afectado de ninguna manera.
De un aspirante a desarrollador. Gracias
Ese banner solo tiene mal CSS.
background-position es una abreviatura de background-position-x y background-position-y .
Asi que,
banner { background-position: bottom; background-position-x: center; /* This is not doing anything, because x became 'center' when it was omitted above. */ background-position-y: center; /* This will override the previously set 'bottom' */ } Como mencionaste, background-position: center hace el mismo trabajo, ya que tanto x como y serán 'centro'.
No hay nada de malo en usar palabras clave, pero si recién está comenzando con CSS, le recomiendo que se acostumbre a usar porcentajes.
(Me agradecerá más tarde cuando necesite un posicionamiento más específico usando calc() .
background: 0% 100% = background: left bottom
background: 100% 0% = background: right top
background: 50% 50% = background: center center
Fuente: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position