background (Posición) en CSS: Aprendiendo sus secretos: Parte 3 - background-position

Hoy analizaremos la propiedad CSS background-position, esta nos sirve únicamente si definimos "background-repeat: no-repeat", esto significa que la imagen no se repite o se repite en el eje de las X (repeat-x) o en el de las Y (repeat-y) que vimos en el anterior artículo, ¿por qué? se preguntarán, bien la idea es simple, generalmente los diseñadores de web quieren posicionar una imagen o patron de ellas para armar la plantilla, así que posicionar una imagen nos permite crear un diseño web basado en imágenes.

Imaginen que quiere poner un degradado con una imagen solamente en la parte de arriba de su web en el eje horizontal repiten la imágenes para general el patron, pero además deben posicionar el degradado para que inicie en la parte de arriba.

Anterior artículo, 2: background-repeat
Siguiente artículo, 4: background-attachment

background-position
Para este caso tenemos dos clases de valores primero los horizontales (eje de las X) y luego las verticales (eje de las Y) podemos usar unidades en pixeles y porcentajes o términos de alienación.

Los valores siempre empezarán de la izquierda y arriba, o sea, primero los valores horizontales y luego los verticales por lo que cualquier imagen con la instrucción no-repeat se alineará a la izquierda-arriba y si solo se define una alineación la otra se centrará automáticamente.

Alineación
La lista de términos de alineación son:

• Left - Izquierda
• Right - Derecha
• Top - Arriba
• Bottom - Abajo
• Center - Centro.

Solamente podemos poner dos palabras combinadas por lo que tendremos 9 combinaciones:

1. left top
2. left center
3. left bottom
4. right top
5. right center
6. right bottom
7. center top
8. center center
9. center bottom

En el caso de que ambos valores para horizontales y verticales sea center, solamente es necesario poner una vez el valor, lo mismo pasa si el valor que se usa es repeat-x donde ponemos solamente top, center o bottom, mientras que para repeat-y es left, right o center.

Usando dos instrucciones de alineación
Ejemplo aplicado a un DIV con un ID llamado "abajoder", creamos la siguiente regla para alinear la imagen a la derecha (right) y abajo (bottom):

CSS:

#abajoder
{
background-image: url(http://sitio.com/imagen.JPG);
background-repeat: no-repeat;
background-position: right bottom;
}
HTML:

<div id="abajoder"></div>

Sin tomar en cuenta otras instrucciones CSS, veremos que el resultado es:

Mezclando con repeat-x o repeat-y
Ejemplo usando repeat-x (horizontal) o repeat-y (vertical), para este caso derecha (derecha) y abajo (bottom), veremos que el patrón comenzará desde el lado derecho y se repetirá en el eje de las X u horizontales.

#abajoder{
background-image: url(http://sitio.com/imagen.JPG);
background-repeat: repeat-x;
background-position: right bottom;
}

Usando un único termino de alineación (centrar)
Para el caso de centrar la imagen con una instrucción, para este caso "center":

#abajoder{
background-image: url(http://sitio.com/imagen.JPG);
background-repeat: no-repeat;
background-position: center;
}

Usar un único termino de alineación diferente de Centrar
Ejemplo usando repeat-x (horizontal) o repeat-y (vertical), veremos que el patron al no haber una instrucción horizontal se centra automáticamente, lo mismo pasaría si pusieramos la horizontal y faltara la vertical.

#abajoder{
background-image: url(http://sitio.com/imagen.JPG);
background-repeat: repeat-x;
background-position: bottom;
}

Posición con porcentajes y unidades de pixeles
Debemos aclarar que cuando hablamos de valores en X e Y, esto incluye valores negativos, esto es importante, porque sirve para diseñar usando solamente una imagen y posicionarla hasta obtener la posición deseada.

El primer valor corresponde al valor horizontal que toma siempre como punto de referencia la izquierda y arriba para la imagen de abajo mezclaremos pixeles y porcentajes:

#abajoder
{
background-image: url(http://sitio.com/imagen.JPG);
background-repeat: no-repeat;
background-position: -100px 40%;
}

Notarán que la imagen se esconde porque declaramos en el horizontal -100 pixeles y como está alineado a la izquierda este se oculta, mientras que 40% centra la imagen a un 40% de su posición determinando esta con el alto de la imagen.

Mezclando unidades de pixeles y porcentajes con alineaciones
Por último podemos mezclar ambos que ahorra mucho trabajo, en vez de tratar de diréctamente de empatar con las medidas exactas.

#abajoder{
background-image: url(http://sitio.com/imagen.JPG);
background-repeat: no-repeat;
background-position: -100px bottom;
}

Forma simplificada o resumida
La forma resumida con solamente background sería:

#abajoder

{
background url(http://sitio.com/imagen.JPG); -100 bottom no-repeat;
}

Como ven es bastante sencillo.

Continuaremos con background-attachment