CSS Sprite demonstration

by barzik

HTML

<table align="center">
    <tr>
        <td>
<a href="http://www.gm.com" target="_blank">
    <div class="clients gm"></div>
</a>
<a href="http://www.visteon.com" target="_blank">
    <div class="clients visteon"></div>
</a>
<a href="http://www.toyota.com" target="_blank">
    <div class="clients toyota"></div>
</a>
<a href="http://www.sjjohnson.com" target="_blank">
    <div class="clients sjjohnson"></div>
</a>
<a href="http://www.mbenz.com" target="_blank">
    <div class="clients mbenz"></div>
</a>
</td>
<td>
<a href="http://www.ford.com" target="_blank">
    <div class="clients ford"></div>
</a>
<a href="http://www.osi.com" target="_blank">
    <div class="clients osi"></div>
</a>
<a href="http://www.trw.com" target="_blank">
    <div class="clients trw"></div>
</a>
<a href="http://www.honda.com" target="_blank">
    <div class="clients honda"></div>
</a>
<a href="http://www.bosch.com" target="_blank">
    <div class="clients bosch"></div>
</a>   
</td>
<td>
<a href="http://www.chryler.com" target="_blank">
    <div class="clients chrysler"></div>
</a>
<a href="http://www.nyx.com" target="_blank">
    <div class="clients nyx"></div>
</a>
<a href="http://www.firstsolar.com" target="_blank">
    <div class="clients firstsolar"></div>
</a>
<a href="http://www.merck.com" target="_blank">
    <div class="clients merck"></div>
</a>
<a href="http://www.lear.com" target="_blank">
    <div class="clients lear"></div>
</a> 
</td>
</tr>
</table>

CSS

.clients{
    width:231px;
    height:136px;
    background-image: url(http://www.ussvision.com/images/sprite_clients.jpg);
}
.gm{
    background-position: 0px 0px;
}
.ford{
    background-position: -231px 0px;
}
.chrysler{
    background-position: -461px 0px;
}
.visteon{
    background-position: 0px -136px;
}
.osi{
    background-position: -231px -136px;
}
.nyx{
    background-position: -461px -136px;
}
.toyota{
    background-position: 0px -272px;
}
.trw{
    background-position: -231px -272px;
}
.firstsolar{
    background-position: -461px -272px;
}
.sjjohnson{
    background-position: 0px -408px;
}
.honda{
    background-position: -231px -408px;
}
.merck{
    background-position: -461px -408px;
}
.mbenz{
    background-position: 0px -544px;
}
.bosch{
    background-position: -231px -544px;
}
.lear{
    background-position: -461px -544px;
}