Si os digo que el CSS es una parte muy importante a día de hoy en prácticamente todos los sitios web no estaría descubriendo la pólvora, pero quizás, analizando bien algunos pequeños trucos, conozcamos cosas que no teníamos ni idea de que se podían hacer y que sin embargo estaban ahí, delante nuestra. Vamos a tratar de llegar a esta situación analizando la propiedad CSS background-position, revisando algunos trucos y curiosidades entorno a ella que nose serán de gran ayuda en nuestros diseños…

Autor:

Hola! Soy diseñador, programador web y cofundador de la startup Cokidoo, desarrollamos aplicaciones web a gran escala y comercio electrónico, aplicaciones para móviles y advertising. Puedes seguirme através de mi twitter y ver algunos de mis themes en Themeforest. También soy aficionado a la fotografía.
Descarga Demostración

Introducción: ¿Qué vamos a hacer?

Hasta ahora los tutoriales en los que había publicado estaban relacionados principalmente con la usabilidad, con el uso de javascript mediante jQuery. Dejando un poco de lado el javascript (aunque seguiremos tratando este tema en otros tutoriales) vamos a tratar de explicar y profundizar en el CSS, concretamente en una de sus propiedades que afectan directamente al diseño de nuestros sitios web: la propiedad background-position.

La propiedad CSS background-position nos permite definir la posición de comienzo de una imagen de fondo en un elemento. Se utiliza en combinación con la propiedad background-image.

El uso de imágenes de fondo en nuestros diseños y sitios web nos permitirá mejorar su aspecto visual considerablemente, nuestro límite será nuestra imaginación y creatividad. A priori puede parecer trivial, pero vamos a ver algunos trucos interesantes que quizás todavía no conozcas, comenzando por los más simples y básicos, asentando las bases para entender ejemplos más complejos en próximos tutoriales.

En este tutorial, al contrario que en otros utilizaremos los distintos pasos del mismo para ver distintos ejemplos completos de técnicas y trucos de la propiedad. ¡Vamos a ello!

Paso 1: Empezando a comprender la propiedad background-position

Antes de comenzar con los ejemplos prácticos será importante entender qué tipos de valores puede aceptar la propiedad background-position. Podríamos dividirlos en cuatro tipos de valores:

  • Keywords (palabras clave): Todos los valores están relacionados con las 4 partes de un cuadrado y el centro.
    • Posibles valores: “top left”, “top center”, “top right”, “center left”, “center center”, “center right”, “bottom left”, “bottom center”, “bottom right”.
    • Por defecto serán siempre “0% 0%”. Si dejamos el segundo valor sin especificar, por defecto usará “center”.
  • Porcentajes (x% y%): El primer valor se refiere a la posición horizontal, el segundo a la vertical.
    • La esquina superior izquierda es el valor “0% 0%”, la inferior derecha “100% 100%”.
    • Si no especificas el segundo valor, por defecto se usará “50%”.
  • Unidades de posición (xpos ypos): El primer valor se refiere a la posición horizontal, el segundo a la vertical.
    • La esquina superior izquierda es el valor “0 0″.
    • Si no especificas el segundo valor, por defecto se usará “50%”.
    • Aquí tienes detallados los tipos de unidades CSS que podrás utilizar.
  • Inherit (heredar): Hereda los valores de la propiedad del elemento padre.

Como habréis podido deducir de este listado, la posición en unidades o porcentajes de la posición de la imagen de fondo se hace siempre respecto a la esquina superior izquierda.

Existen 4 tipos de valores para la propiedad background-position: Keywords (palabras clave), Porcentajes, Unidades e Inherit (herencia). Para definir la posición de la imagen de fondo debemos recordar que va en relación a la esquina superior izquierda (0, 0).

Ahora que tenemos un poco más claro los valores que puede recibir una imagen de fondo, vamos a tratar los 4 tipos en los siguientes pasos del tutorial.

Paso 2: Utilizando las Keywords con background-position

Vamos a empezar por el primero de los cuatro tipos de valores que acepta la propiedad. Comencemos pues con las keywords (palabras clave).

Vamos a posicionar la siguiente imagen de Mario en un cuadrado en distintas posiciones alterando sólo el valor de su background-position mediante keywords. El resultado será el siguiente (puedes pinchar en la imagen para ver el documento):

ejemplo1

¿Interesante verdad? Pues mucho más la sencillez con la que logramos estos resultados. Este sería el HTML del ejemplo mostrado:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es-ES">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Dominando en CSS el background-position</title>
	<link rel="stylesheet" href="main.css" type="text/css" media="screen" />
</head>
<body>
	<div class="wrapper">
		<h1>Uso básico del background-position con Keywords</h1>
		<div class="section">
			<div class="fleft">
				Con valores "top left":
				<div id="keywords" class="ejemplo1"></div>
			</div>
			<div class="fleft">
				Con valores "top right":
				<div id="keywords" class="ejemplo2"></div>
			</div>
			<div class="fleft">
				Con valores "center":
				<div id="keywords" class="ejemplo3"></div>
			</div>
			<div class="fleft">
				Con valores "bottom":
				<div id="keywords" class="ejemplo4"></div>
			</div>
		</div>
	</div>
</body>
</html>

Y la parte del documento CSS que nos permite lograr el resultado final y la colocación deseada de la imagen de fondo:

Nota: Parece que el plugin para mostrar código CSS añade en los ejemplos “ejemplo2″ y “ejemplo4″ duplicado el valor para bottom y right, ¡obviadlos!

/******* EJEMPLO1 *******/
#keywords{
	width: 150px;
	height: 150px;
	margin-top: 1em;
	background-color: #fff;
	background-repeat: no-repeat;
	background-image: url('img/mario1.png');
}
#keywords.ejemplo1{
	background-position: top left;
}
#keywords.ejemplo2{
	background-position: bottom right;
}
#keywords.ejemplo3{
	background-position: center;
}
#keywords.ejemplo4{
	background-position: bottom;
}
/******* /EJEMPLO1 *******/

Cabe destacar que para los dos últimos ejemplos no hemos usado el segundo valor, por esa razón (y como habíamos comentado anteriormente) el valor por defecto que adquiere es el de “center“.

También sería interesante resaltar que para el primer ejemplo, podríamos simplemente no haber definido la propiedad background-position, por lo que por defecto utilizaría “top left” o “0 0″, es decir, la esquina superior izquierda.

Vámonos a por el siguiente paso, crearemos ejemplos para el uso de porcentajes y unidades con el background-position.

Paso 3: Utilizando los porcentajes y unidades con background-position

En este caso, abordaremos dos tipos de valores en un mismo paso, ya que podríamos considerar a los % como un tipo de unidad, y de hecho se emplean prácticamente de la misma forma que las unidades CSS (pixels, inches, em…).

Este será el aspecto final de nuestro segundo ejemplo, podéis echarle un vistazo haciendo click en la imagen antes de ponernos a explicar lo que hemos hecho:

ejemplo1

Esta sería nuestra estructura HTML para los nuevos ejemplos:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es-ES">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Dominando en CSS el background-position y los Sprites</title>
	<link rel="stylesheet" href="main.css" type="text/css" media="screen" />
</head>
<body>
	<div class="wrapper">
		<h1>Uso básico del background-position con porcentajes y unidades</h1>
		<div class="section">
			<div class="fleft">
				Con valores "50% 50%":
				<div id="keywords" class="ejemplo5"></div>
			</div>
			<div class="fleft">
				Con valores "80px 0":
				<div id="keywords" class="ejemplo6"></div>
			</div>
			<div class="fleft">
				Con valores "center -50px":
				<div id="keywords" class="ejemplo7"></div>
			</div>
			<div class="fleft">
				Con valores "50% 154%":
				<div id="keywords" class="ejemplo8"></div>
			</div>
		</div>
	</div>
</body>
</html>

Y esta la parte del CSS utilizada para los cuatro casos del ejemplo propuesto:

/******* EJEMPLO2 *******/
#keywords.ejemplo5{
	background-position: 50% 50%;
}
#keywords.ejemplo6{
	background-position: 80px 0;
}
#keywords.ejemplo7{
	background-position: center -50px;
}
#keywords.ejemplo8{
	background-position: 50% 154%;
}
/******* /EJEMPLO2 *******/

Cabe destacar que en los dos últimos ejemplos hemos utilizado de forma combinada distintos tipos de valores, en el penúltimo ejemplo: keyword+unidades y en el último porcentaje+unidades.

También es interesante ver cómo podemos usar valores por encima del original (154% en el último ejemplo) o negativos (-50px en el penúltimo ejemplo), estos valores positivos / negativos son siempre respecto a la esquina superior izquierda, ¡recordadlo!

Es importante saber que a pesar de ser distintos tipos de valores, podemos combinar los distintos tipos entre sí, utilizando de forma combinada las unidades, porcentajes o keywords.

Con esto quedan vistas las distintas combinaciones que se pueden dar, seguro que nos quedan algunas en el tintero, pero entendiendo todos estos ejemplos sólo os queda seguir probando y consiguiendo nuevos resultados para vuestros diseños :)

Reflexión final

Como habréis podido comprobar nuevamente con este tutorial, las cosas son más sencillas de lo que parecen, sólo se necesita de un poco de paciencia para informarse debidamente sobre los distintos temas y tendremos soluciones curiosas a todos nuestros problemas a la hora de maquetar.

En próximos tutoriales trataremos de ver técnicas más avanzadas que también utilizan background-position, concretamente el uso de los CSS Sprites que se utilizan en webs como Youtube y otras muchas webs conocidas (y no tan conocidas).

¡Nos vemos y espero os sea de utilidad para vuestros proyectos!

¿Necesitas desarrollar un proyecto web o para móviles? ¡Estamos disponibles!

Visitar Cokidoo

Cokidoo, los creadores de Ontuts, desarrollamos proyectos tecnológicos centrados en redes sociales y aplicaciones web, aplicaciones móviles y consultoría web y bases de datos.

Somos jóvenes, inquietos, versátiles, apasionados por la innovación y enfocados en las nuevas tecnologías. Con Ontuts tratamos de compartir nuestro conocimiento adquirido en los distintos proyectos, ayudando a la comunidad y mostrando nuestra capacidad tecnológica.

Si necesitas un presupuesto sin compromiso, estamos disponibles, no dudes en contactar con nosotros.

Comentarios en esta publicación (4 comentarios)

¿Te ha gustado esta publicación? ¡Puedes compartir tu opinión con todos nosotros! Simplemente pincha aquí mismo.

Mariajo

Muy bueno el tutorial, voy a recomendarlo a mis amigos, estoy deseando leer en de los CSS Sprites me parece un tema muy interesante.

@Mariajo Gracias! Intentaré escribir a lo largo de esta semana el de los CSS Sprites que tengo pendiente ;)

Night

Esto es mas que importante para hacer que la página demore menos en cargar, imprescindible !

Miguel

Muy bueno pero el segundo es bottom-right Saludos