CSS: background-position el gran desconocido

La verdad es que no es tan tan desconocido, pero el título queda mas bonito poniéndolo así xD

A la hora de añadir una imagen de fondo a un elemento mediante css tenemos varias opciones para organizarlas, lo primero que tenemos que tener en cuenta es que esta propiedad debe añadirse a un elemento bloque, por lo que si es un enlace (a) debemos añadirle la propiedad: display:block.

Un ejemplo básico, tenemos una imagen de 100x100px y la queremos poner como fondo:

#ejemplo {
	width:100px;
	height:100px;
	background-image:url(iconos.gif);
}

Pero podemos complicarlo un poquito más, vamos a crear un archivo que contenga varias imágenes y éstas utilizarlas como fondo por separado en divs diferentes (lo que se llama css sprites), algo así como lo que hace Google pero no exactamente de la misma forma.
Esto lo podemos conseguir utilizando background-position.

Lo voy explicando con ejemplos que creo que es como mejor se entiende, lo primero es crear una imagen con los iconos a utilizar en la web, yo he creado una muy basta para notar las diferencias:

Sprite

Sprite

* El hecho de tener una sola imagen en lugar de 4 es aligerar nuestra web, si llamáramos a 4 imágenes saturaríamos más la web que llamando solo a 1, independientemente del peso (siempre con unos límites).

Teniendo ya la imagen ahora creamos un div que tenga el tamaño de la forma que queramos mostrar, la imagen del ejemplo mide 200x200px y cada forma ocupa 100x100px, por lo que el div medirá 100x100px.

#ejemplo {
	width:100px;
	height:100px;
	overflow:hidden;
	background-image:url(iconos.gif);
}

* Con overflow:hidden indicamos que si el contenido sobresale del div no se muestre.

Si no especificamos el background-position lo mostrará por defecto como top left y empezará a mostrar la imagen desde la esquina superior izquierda, por lo que veríamos el círculo.

Los valores válidos para esta propiedad son:
– Medidas relativas (%)
– Medidas absolutas (px, em)
– Palabras clave: top (0% vertical), left (0% horizontal), bottom (100% vertical), right (100% horizontal) y center.

Si quisieramos mostrar el triángulo en lugar del circulo podríamos indicarlo de muchas maneras:

#ejemplo {
	background-position: top right;
	background-position: right top;
	background-position: 100% top;
	background-position: 100px top;
	background-position: right 0;
}

Teniendo en cuenta que el primer valor se calcula de forma horizontal y el segundo de forma vertical al no utilizar palabras claves, con las palabras claves no importa el orden.
También comentar que si sólo indicamos un valor, el segundo lo tomará por defecto como center, 50% en horizontal (si el valor indicado es el vertical) o 50% vertical (si el valor indicado es el horizontal).

Así si ponemos como valores bottom left mostraríamos el pentágono y con bottom right mostraríamos el cuadrado.

Ale, ahora que lo habéis entendido, a practicar con ejemplos más complicados que yo os los he puesto muy fáciles :)

  • 17 septiembre 2009
  • css
  • ,

7 comments on “CSS: background-position el gran desconocido”

  1. Buen artículo! Y gracias por compartirlo ;)

    Hace mucho que leo del tema y nunca lo puse en práctica :P veremos si esta vez empiezo por reconstruir un sitio que ya hice :D

    PD: en el primer background-image del post se te escapó una n

    1. La verdad es que no le había dado mucha importancia a esto y sí que la tiene, si se aplica bien puedes quitarte bastantes descargas innecesarias.
      Gracias por el recurso Skeku, así da menos pereza implementarlo! xD

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *