各ページのタイトル文字（H2）を画像にしました。
方法は、CSSを使用し背景画像をして画像を入れ込んでいます。

こんな感じで・・・
#undercolumn h2 {
　display: block;
　height: 0px !important;
　height /**/: 0px;
　width: 560px;
　padding: 50px 0px 0px;
　overflow: hidden;
　margin: 0px 0px 30px
}

#undercolumn_aboutus h2 {
　background: url(../img/mnd/HL2_about.jpg);
}


商品一覧のページでも、カテゴリーごとに画像を入れ替えたいと考えております。
私の考えでは、下記のようにid属性がカテゴリー別に変わってくれればいいのですが方法がわかりません。

<div id="カテゴリー名">
　<h2 class="title"><!--{$tpl_subtitle|h}--></h2>
</div>

ちなみに、<!--{$arrSearch.category|h}-->は日本語でカテゴリー名が取得できるようですが、これをアルファベット表示で取得できれば最高です。

アドバイスをよろしくお願いいたします。