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 serán revisados a veces. No te olvides que soy una persona, no se trata de faltar al respeto, todos tenemos opiniones, no hay que enojarse.

Puedes marcar Notificarme para recibir la notificación de la respuesta.

2 comentarios:

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

    ResponderBorrar
    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;

      Borrar

El ascenso de Skywalker(2019)

Joker 2019Una película que ha roto a divido a los fans muchos culparán a sus director por querer reparar Los últimos Jedi, no es su culpa al final.

[Leer artículo...]

La Espada del Inmortal (2019

Blade of The Immortal (2019)La historia de Manji, un guerrero samurái sin señor que ha sido condenado con la inmortalidad...

[Leer artículo...]

Kemono Michi: Rise Up (2019)

Kemono Michi: Rise Up (2019)Del autor de Konosuba, Genzo Shibata es un luchador japonés que es transportado a un mundo de fantasía, quien está obsesionado con los seres peludos.

[Leer artículo...]

ELI (2019)de Netflix

ELI (2019)de Netflix Reseña y criticaPelícula lanzada directo a video que nos cuenta una historia que parecería sacada de la Dimensión desconocida.

[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.