This is my implementation of a Masterpage like solution in Python. (more...)

Using Css Sprite in Web Development can improve significantly your page load speed.

Parts of a big Image via Css background-position

How does it work?

The Image

Html Source Code

<div id="spriteSample">
<ul>
	<li class="chrome"></li>
	<li class="opera"></li>
	<li class="safari"></li>
	<li class="ie"></li>
	<li class="firefox"></li>
</ul>
</div>

Css Source Code

<style>
#spriteSample li{
	background: url('/blg/wp-content/uploads/sprite-browsers.png') no-repeat top left;
	float:left;margin-right:10px;font-weight:bold;font-size:22px;color:#002EB8;
	list-style: none;border:solid #000 1px;margin:5px !important;margin-left:0px;
}
#spriteSample .chrome { background-position: 0 0; width: 64px; height: 64px; } 
#spriteSample .firefox {background-position: -69px 0; width: 64px; height: 64px; } 
#spriteSample .ie { background-position: -138px 0; width: 64px; height: 64px; } 
#spriteSample .opera { background-position: -207px 0; width: 64px; height: 64px; } 
#spriteSample .safari { background-position: -276px 0; width: 64px; height: 64px; } 
</style>

Online Tools

Uncategorized browser tools