martes, 3 de julio de 2012

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

Comentarios y Consultas

Los mensajes son moderados serán revisados antes de publicarse.

Este no es un foro de adolescentes, no uses letras en vez de palabras completas como "q" en vez de "que", ni escribas tus mensajes en mayúsculas, se respetuoso con los demás, si no estás de acuerdo no comentes.

Una cosa es que no te guste una crítica, otra que uses un lenguaje inapropiado para demostrarlo. No me siento en la obligación de publicar ningún mensaje en específico o de leerlo entero si usas palabras altisonantes.

2 comentarios:

  1. yo he tratado de poner : background-repeat: repeat-y; + background-position: 0 500px; y nada de nada...

    ResponderEliminar
    Respuestas
    1. Cuando manejes instrucciones separadas, no debe existir la propiedad background sola.

      por ejemplo si usas la propiedad background debe declararse en una sola línea.

      background: url(img.jpg) 0 500px repeat-y;

      Si declaras propiedades individuales debes tener todo individual como;

      background-image: url(img.jpg);
      background-position: 0 500px;
      background-repeat: repeat-y;

      Eliminar

Samurai Jack (2017), episodio 10 "Final"

Samurai Jack (2017)Jack se enfrenta por fin con Aku, todos tratan de ayudar al samurai y la sorpresa vendrá del pasado.

[Leer artículo...]

Noragami entra en paro indefinido

Noragami es suspendida temporalmenteUna de las autoras no puede continuar con su trabajo al frente del manga y se ha decidido meter la historia en hiatus, lo que puede significar...

[Leer artículo...]

Tales of Zestiria y su final Yuri

El final de Tales the Zestiria The XLas aventuras de Sorey llega a su fin con un final de lo más raro que he visto hasta ahora.

[Leer artículo...]

Warau Salesman New (2017) El vendedor sonriente

Warau Salesman New (2017) EstrenosSatoru descubre al culpable de la trama, es el momento de enfrentarse y tendrá que dar todo de sí para cambiar su suerte.

[Leer artículo...]

  © Cgnauta | CGsign blog | [Ver Licencia de uso] | Matius Lenin, Creative Commons, algunos derechos reservados

Regresar ARRIBA  

Vistas desde Mayo 2009

▼/▲ Archivo del Blog

Visitas totales

Información

IBSN: Internet Blog Serial Number 01-77-94-2008

Esta plantilla es creada y diseñada por Matius Lenin para CGnauta blog. Con Scripts de JQuery bajo licencia GNU/GPL. CGnauta es una marca registrada propiedad de Matius Lenin.

Anexos

Bitacoras.com