Background-position: secretos, curiosidades y un valor complejo recién documentado 19.11.14

Background-position: secretos, curiosidades y un valor complejo recién documentado

Entre el amplio grupo de las propiedades relativas a los fondos y englobadas en la forma acortada de background está la que controla el punto del contenedor donde se inserta la imagen declarada mediante background-image. Es la propiedad Background-position.

Propiedad que no por veterana deja de tener sus particularidades y para más de uno, estoy seguro, también sus secretos. Además de existir un valor complejo no documentado en las especificaciones que facilita posicionar la imagen de fondo en lugares que de otra forma sería imposible de lograr.

Particulares y secretos que al conocerlos harán más fácil y divertido utilizarla.

La propiedad background-position se utiliza para indicar el punto de inserción de la imagen usada en para el fondo del elemento. Dicho punto está formado por dos valores correspondientes inicialmente el primero al eje horizontal y el segundo al eje vertical.

Estos valores admiten cualquier unidad de medida utilizadas en Css, así como ser declarados en porcentajes o palabras claves: top | bottom | left | right | center. Si se usan estas palabras no se pueden mezclar las correspondientes al mismo eje (por ejemplo left right o top bottom es un error).

Se pueden mezclar dos de estos tipos conjuntamente: 10px 30% top 35px

Referencia del punto 0 0

Para posicionar la imagen en el elemento se necesitan dos referentes: el punto 0 0 referencia de la caja respecto al que se coloca la imagen y (como ésta es también una superficie -tiene una anchura y una altura-) el punto base de la imagen sobre el que se moverá la imagen respecto al 0 0 de la caja

El punto 0 0 o referencia para posicionar la imagen con background-position inicialmente es la esquina superior izquierda del límite del área del elemento que cubrirá el fondo. los límites de dicha área dependerá de valor declarado para la propiedad Background-clip y Background-origin. Más info en el post El fondo a fondo.

En la imagen el punto base para colocarla respecto a ese 0 0 depende de cómo se haya declarado el valor de la propiedad:

• Si se declaran unidades de medida (px, rem...) el punto 0 0 del elemento es la esquina superior izquierda y el punto base de la imagen es también su esquina superior izquierda.
• Si se usan palabras clave el punto 0 0 se corresponde con los laterales de la caja indicados y la base para desplazar la imagen esos mismos lados de ella.
• Por lo anterior, si la palabra clave es center center el punto 0 0 de la caja es su centro exacto y el punto base de la imagen también es su centro. Por lo tanto la imagen se centra en su caja contenedora.
• Si se usan porcentajes los dos referentes (punto 0 0 en la caja y punto base en la imagen) coinciden con dichos valores: un valor de background-position: X% Y% desplaza el punto que corresponde con el X% Y% de la imagen la distancia indicada (X% Y%) respecto al 0 0 de la caja. Por ejemplo:
  .- Un valor de 0% 0% coloca la esquina superior izquierda de la imagen en el punto 0 0 de la caja.
  .- Un valor de 100% 100% coloca la esquina inferior derecha de la imagen en el punto 100% 100% de la caja (esquina inferior derecha).
  .- Un valor de 50% 50% coloca el centro de la imagen en el centro de la caja.

Si sólo se declara un valor numérico (no palabra clave) se corresponde con el eje X y el valor omitido es el del eje Y que se computa como 50% o center.

Si se usa una sola palabra clave el valor para el otro eje se computa también como center o 50%

Background-position y fondos repetidos

Todo lo anterior está basado en la presunción de no repetir la imagen de fondo. Pero si nos encontramos con background-repeat: repeat ya sea en uno o ambos ejes, todo lo anterior (punto 0 0 de referencia y punto base de la imagen) se utilizan para colocar la imagen que conformará el centro del mosaico. Dicho de otra forma, en ese punto se coloca la primera imagen que se va a repetir y en base a ella el resto de la repetición.

Un valor complejo no recien documentado para Background-position

Te habrás fijado que en todas las formas anteriores de declarar el valor (para uno o los dos ejes) sólo lo hacemos con un de las varias formas (unidad de medida, porcentajes o palabra clave).

Sin embargo de esa forma hay casos que no se podrían lograr en base a lo que recogen las especificaciones ya que si usamos las dos primeras (medidas o porcentajes) moverá la imagen respecto al punto 0 0 de la caja (superior izquierda).

Así que ¿cómo lograr que la imagen se coloque a X e Y px (o %) de cualquiera de las otras tres esquinas de la caja sin tener que hacer cálculos previos y ajenos al Css si sus medidas son absolutas? Cosa que se vuelve imposible si el tamaño del elemento es relativo y variable de una situación a otra (como usar % o unidades relativas al viewport)

La solución pasa por usar las palabras clave seguida del valor en (medidas o porcentaje) que deseamos:

Pese a que no se encuentre recogido en ningún ha sido incluido recientemente por del Consorcio en los documentos relativos a los fondos es plenamente funcional en los navegadores modernos. Puedes verlo en el pen siguiente:

See the Pen bacckground-position complejo by Kseso (@Kseso) on CodePen.

Con esta forma compleja es obligatorio usar los dos pares (palabra clave + valor) para los dos ejes. En caso contrario computará como error.

Y para finalizar, si deseas jugar un poco con la propiedad background-position y las diferentes formas de declararle valores te dejo este pen con algunos casos. Incluido el uso de la función css calc() en ella.

See the Pen background-position by Kseso (@Kseso) on CodePen.

Lecturas complementarias

1. El fondo a fondo. Novedades Css3 en la propiedad background
2. Bordes transparentes: background-clip y background-origin. Relación entre fondos y bordes
3. Ventana abierta al fondo del body: recortes en el background.
4. Otros artículos más, demos incluidas.

Actualización

NOTA: tras la publicación del artículo consulté los documentos del W3c relativos al background y descubrí dos detalles:

1. En la actualización última del Module Level 3 y el borrador del Module Level 4 recogen lo que llamé la valor complejo.
2. En los ejemplos que pone sobre este valor complejo hay serias discrepancias en el soporte que hacen Chrome y Firefox al mezclar los valores (ejemplo 8 del primer enlace de esta actualización).
3. Pese a la advertencia que existe desde el inicio de no mezclar (en la forma sencilla) palabra clave con un valor para el otro eje en medidas o porcentajes (left 30px), también hay inconsistencia entre navegadores.

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso