Using Sprites with CSS 3

Hi All, 

I am definately liking some of the new features in CSS 3. A many a time I have had one image and have wanted to use parts of it in my websites, on different parts of the page. I nice addition to the CSS framework is the use of sprites and here is how you use it.

For example, I am using this image (that contains seperate images) and I want it to be shown as the icons in a list.

 dl

        {

            float: left;            

            width: 300px;

            padding-left: 50px;          

        }

        dt

        {

            padding-left: 40px;

            padding-top: 9px;

            padding-bottom: 4px;

            background: url( '../images/sprite.gif' ) no-repeat;

        }

        dt span

        {

            border-bottom: 1px solid #cccccc;

        }

        dt.part1

        {

            background-position: 0 0;

        }

        dt.part2

        {

            background-position: 33px -33px;

        }

        dt.part3

        {

            background-position: 66px -66px;

        }

        dt.part4

        {

            background-position: 98px -98px;

        }

        dt.part5

        {

            background-position: 131px -131px;

        }

        dt.part6

        {

            background-position: 164px -164px;

        }

<dl> <dt class="home"><span>Why we are different?</span> </dt> <dd> No other company in the world offers the same experience as Web Site Masterz. You personally choose from a large range of experienced professionals, your project team.<br /> <a href="http://www.some-link.com" title="dasgsdfg">sdfg</a> </dd> <dt class="preferences"><span>How do I start?</span> </dt> <dd> Simply make your way to the Arrage A Quote page and use the simple wizard to make a project request. Once you have been guided through the wizard you will be contacted by Web Site Managerz and a more involved meeting will be arranged.<br /> <a href="http://www.google.com" title="sdfgsd">sdfgsd</a> </dd> <dt class="web"><span>Why use Web Site Managerz?</span> </dt> <dd> Every other Web Design company in the world is the same. They use cheap CMS tools to autogenerate your sites and don't provide you with the flexibility to think outside THEIR square. We develop every solution from scratch as no 2 solutions are ever the same. <br /> <a href="http://www.google.com" title="sdfsaf">more &raquo;</a> </dd> </dl>

This will simply split the images up and show them as the icon in a list style.

Hope this helps,

- Tim