CSS Sprites es una técnica de maquetación que consiste en agrupar varias imagenes en un fichero y mostrarlas por separado mediante CSS, el objetivo de esta tecnica es optimizar y mejorar el rendimiento de una web reduciendo el numero de peticiones del navegador a una sola petición.

Si tenemos cuatro imagenes de 50px X 50px, agrupamos las cuatro en una sola imagen de 100px X 100px, el resultado seria el siguiente:

sprite-min

Ahora podemos colocar esta imagen en varios elementos y mostrar una parte de la imagen en cada uno de ellos, si tenemos cuatro elementos, definimos el mismo background-image para los cuatro elementos, y una regla CSS distinta para cada uno de ellos que indique la posición de la imagen que queremos mostrar.

Creamos cuatro elementos <div> en un documento HTML, cada uno de ellos con un identificador unico o una clase distinta.

Ejemplo

<!DOCTYPE HTML>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Didesweb Sprites CSS</title>
</head>
<body>
	<div id="elemento_1"></div>
	<div id="elemento_2"></div>
	<div id="elemento_3"></div>
	<div id="elemento_4"></div>
</body>
</html>

Ahora creamos los estilos, definimos el mismo background-image para los cuatro elementos <div>, para cada uno de ellos tenemos que definir con la propiedad background-position la posicion a la que se desplaza la imagen, esta propiedad admite (entre otros) dos valores, el primero es la posicion horizontal a la que se desplaza la imagen y el segundo la vertical.

div {
	background-image: url( /images/sprite-min.png);
	margin: 10px;
	width: 50px;
	height: 50px;
}
#elemento_1 {
	background-position: 0 0 ;
}
#elemento_2 {
	background-position: 0 50px;
}
#elemento_3 {
	background-position: 50px 0;
}
#elemento_4 {
	background-position: 50px 50px;
}

Este es el resultado.

ELEMENTO 1

ELEMENTO 2

ELEMENTO 3

ELEMENTO 4

Esto es solamente un ejemplo sencillo de lo que se puede hacer con esta tecnica de CSS, no es necesario que las imagenes sean del mismo tamaño, aunque si muy recomendable ya que se complica mucho menos la tarea de posicionar el background, es necesario agregar otras propiedades de CSS para completar el proceso y ser muy cuidadosos con las medidas.

De lo contrario puede pasarnos algo parecido a esto:

Error: en la propiedad background-position se han definido valores erroneos (background-position: 10px 25px;).

Por defecto, la propiedad background-position establece la posición inicial de la imagen de fondo en la esquina superior izquierda de un elemento, y se repite tanto vertical como horizontalmente a no ser que le indiquemos lo contrario con la propiedad background-repeat, a partir de esta regla debes medir cada imagen desde la esquina superior izquierda, hasta el final de la misma.

Puedes ver este código en mi cuenta de GitHub

Valoraciones


Sé el primero en valorar

* Tu valoración puede tardar hasta 72 horas en publicarse.

He leido y acepto el Aviso legal y condiciones de uso

Utilizamos cookies propias necesarias para el correcto funcionamiento de la web y personalizar el contenido. No utilizamos cookies de terceros ni guardamos información personal sobre ti. Puedes encontrar más información en nuestra Política de cookies.

ACEPTAR
Aviso de cookies