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

Termina la serie Grimgar de Fantasía y Cenizas

Grimgar de Fantasía y Cenizas (2016)Llegó a su fin Grimgar de Fantasía y Cenizas luego de doce episodios.

[Leer artículo...]

One Punch Man OVA 4 (2016): Review y crítica

One Punch Man OVA 4 (2016): Review y críticaY llega una nueva adaptación de personajes del universo marvel, una divertida aventura espacial.

[Leer artículo...]

Gate: Segunda temporada (2016): Episodio 12 Final: Reseña y crítica

Gate: Segunda temporada (2016): Episodio 12 Final: Reseña y críticaLas aventuras de Itami y sus amigos llega a su fin con el rescate de Piña de las manos de Zorzal.

[Leer artículo...]

Desaparecida: Boku Dake ga Inai Machi (2016) Episodio 12 Final - Reseña y crítica del anime

Desaparecida: Boku Dake ga Inai Machi (2016)Satoru 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