CSSでの質問です。

> ただバックグラウンドイメージをしていすると全体に表示されてしまいますよね？
> なのでどうやって目的の画像だけを表示するのかなと。
> 背景画像にwidthとかheightを指定できるんでしょうか？

背景画像の width / height 指定はできません。

サイドメニューのように
「縦方向にはどれだけ延びるか分からないが、横幅は決まっている」場合、
（決まっている横幅は確保した上で）横に並べた画像を使用すれば、
CSS Sprite を利用することが可能です。

CSS Sprite は基本的に、幅・高さともに決まっている要素に使うものなので、
（幅・高さが可変の場合、ご指摘のように全体に画像が表示されてしまう為）
少なくともいずれかの方向が固定されていたり、目安になる幅が無いと利用できません。

「10個のリスト項目で、それぞれアイコンが違う」というような場合は、
上記のような方法で CSS Sprite を利用する意味はあるかもしれませんが、
「リストタグ自体のアイコンを一括指定する」場合、単独画像にした方が良いでしょう。

回答ありがとうございます。
ただliタグしかないので、バックグラウンドイメージを
指定するとliタグ全体にcss spriteが表示されちゃうんですよね。
spanタグとかをliタグの中に書ければ問題ないんですど、、、

kazさんの回答にあるようにliにbackground-imageで背景を指定する方法で可能です。
リスト項目ごとにそれぞれ違うクラス名またはIDを割り当てる必要がありますが・・・
後はbackground-positionで表示位置を指定します。
ftypeさんが回答した参考ページを確認してみてください。
一枚の画像で、メニュー(リスト)ごとに違うアイコン画像を表示したいのでしょうか？
もし説明が必要でしたら、回答させていただきます。
『spanタグとかをliタグの中に書ければ問題ないんですど、、、』との事ですが、HTMLの変更が出来ないのでしょうか？
各リストの項目にアンカータグ(リンク)は指定してありますか？
指定してある場合、マウスオーバー用の画像も表示したいですか？

rouge_2008さん回答ありがとうございます。

> 一枚の画像で、メニュー(リスト)ごとに違うアイコン画像を表示したいのでしょうか？
いえ。同じ画像で良いです。
>『spanタグとかをliタグの中に書ければ問題ないんですど、、、』との事ですが、HTMLの変更が出来ないのでしょうか？
HTMLの変更はできません。尚かつ表示したいアイコンはCSS Spriteに含まれているので、できるだけアイコンを一つだけ切り出したくないのです。
>各リストの項目にアンカータグ(リンク)は指定してありますか？
質問文に示してあるように、単純なリストかつプレーンなテキストのみです。ul li タグ以外はありません。
>指定してある場合、マウスオーバー用の画像も表示したいですか？
いえ、箇条書きにしたいだけなのでマウスオーバーはいりません。

よろしくお願いします。

> HTMLの変更はできません。尚かつ表示したいアイコンはCSS Spriteに含まれているので、できるだけアイコンを一つだけ切り出したくないのです。

その場合は、やはりCSSスプライトでは無理だと思います。
CSSスプライト用の画像がこのように(http://css-tricks.com/examples/CSS-Sprites/Example1After/img/image_nav.gif)縦に繋がっている場合は、リスト項目の高さだけ決めれば何とかなりますが、目的の画像の右側にも別の画像が繋がっているのでしたら、今回の条件(HTMLの変更なし)では無理なようです。

※参考までに、上記の画像は以下のサイトで使用されています。
http://css-tricks.com/css-sprites/

なるほど。ご丁寧にありがとうございます。はっきりと理解できました。
本当に助かりました。

わざわざすみません。
ポイント送信ありがとうございました。
有難く頂戴します。ｍ(＿＿)ｍ