素直に<input type=”image”>とすればよかったのだが、CSSだけでロールオーバーみたいなことをしたかったのと、Firefoxでいけてたので意固地になっていろいろ試してしまった。

ちなみに、IE8ではもともと問題なしで、以下はIE7での現象。
IE6以前では試していません。（もう過去の人です。）

結論から言うと、私がテストした限りでは以下の条件を満たすと、ボタンの背景にも画像を設定できた。

• background-imageだけでなくbackground-colorも指定する。
• text-indent: -9999pxみたいなことはできない？

ボタンのテキストも画像にしたかったのだが、

text-indent: -9999px;

と記述したとたんに背景画像が消えたので、これは素直にあきらめた。

background-colorを指定したとたんに背景画像が表示されたのには驚いた。

参考までに、今回使用したCSSは以下のような感じ。

input.save {
 background-color: #ffffff;
 background-image: url(../images/next.gif);
 background-repeat: no-repeat;
 background-position: left top;
 border: none;
 width: 119px;
 height: 44px;
 cursor: pointer;
 font-weight: bolder;
 font-size: 120%;
 color: #ffffff;
 padding-left: 50px;
 text-align: left;
}

input.save:hover{
 background-position: left bottom;
}

関連する記事

• Smartyテンプレートに直接SQLを記述するSmartyプラグイン
• Spotlightでファイルサーバーの全文検索
• キーボード 「東プレ NG01B0 REALFORCE91UBK」
• 住所からGoogleMapに変換するSmartyプラグイン