Du bist hier: bueltge.de » test »

CSS Sprites einfach erklärt

So sieht es aus

So geht es

Bild

125px breit und 60px hoch; 5px Abstand sind zwischen den einzelnen Bildern des Ganzen

CSS Style

0 0 muss bei background nicht angeben werden, nur wenn es eine Verschiebung geben soll.

	#image-link {
	width: 60px;
	height: 60px;
	text-decoration: none;
	display: block;
	background: url('images/fb-sprite.png') 0 0;
	}
	
	#image-link:hover, #image-link:active {
	background-position: 60px 0;
	}

HTML Code

	<a href="#" id="image-link">&nbsp;</a>