背景画像上にテキストを配置したボタンについて

質問

今晩は。
いつもお世話になっています。

CSSで次のようなボタンを作りたいと思っています。

・背景画像の上にテキストを乗せたボタン。
1)ボタン上のテキストを書き換えられるようにしたい。
2)ボタンはページによって同じ背景画像でサイズを変えたい。（指定した縦横幅に合わせて背景画像がリサイズされるようにしたい）
3)背景画像ごとリンクにしたい。

参考サイトを見て、現在以下のようなボタンを作ってみました。
1、2はクリアできたのですが、ボタン上のテキストではなく、背景画像自体をリンクにするにはどうすればいいでしょうか？

また、色々方法はあると思うのですが、今回のようなボタンを作る上でもっと効率の良いCSSがあれば、参考サイト等教えて頂けると幸いです。

-------------CSS--------------
div.photo{
width:100px;
height:50px;
background-image:url("xxxx.png");
background-repeat:no-repeat;
position:relative;
background-size:contain;
float:right;
}
.text{
width:100px;
position:absolute;
top:8px;left:10px;
color:#ffffff;
line-height: 1.2;
font-size:15px;
}

------------HTML-------------
<div class="photo">
<div class="text"><a href="#">テキスト</a></div>
</div>

以上になります。
よろしくお願い致します。

回答No.1

ORUKA1951 · ベストアンサー

1)ボタン上のテキストを書き換えられるようにしたい。
　意味不明なのですが、スタイルシートで書き換えると言う意味ですか？

2)ボタンはページによって同じ背景画像でサイズを変えたい。
　（指定した縦横幅に合わせて背景画像がリサイズされるようにしたい）
　主語がどれですか？
　　「ボタンは」・・「サイズを変えたい」と言う意味？(1)とどう違うの？

　指定された＝固定された＝縦横幅に合わせて？？？？指定されてりゃリサイズする必要はないのでは

　なお、CSS3のbackground-sizeは非適合ブラウザが結構あるので、背景ではなく画像としたほうが良いのでは？

3)背景画像ごとリンクにしたい。
　基本的にa要素は内部に行内要素しか含むことができない(HTML5はできる)ので、画像にリンクを・・

　そのとき、画像上のボタンのリンクも有効にならなければならないのでしょうね。z-indexかソース上の順番で調整する。

　なお、もっと根本的な問題が・・何でもかんでも<div>を使うべきではありません。あくまでナビゲーションでしたら
　<div class="nav">
　　<ul>
　　　<li><a href=""></a></li>
　　　<li><a href=""></a></li>
　　　<li><a href=""></a></li>
　　　<li><a href=""></a></li>
　　</ul>
　</div>
とマークアップしましょう。デザインのためにHTMLを記述したらダメです。スタイルシートを解釈しないブラウザや検索エンジンに情報を伝えられません。
『Lynx などのテキスト ブラウザを使用して、サイトを確認します（ほとんどの検索エンジンのスパイダーには Lynx で見えるようにサイトが映ります）。 ( http://support.google.com/webmasters/bin/answer.py?hl=ja&answer=35769#2 )』
　先で、まったくデザインを変えたくなっても手を着けられなくなりますよ。

お礼

ご返答ありがとうございます。
頂いたヒントを参考に調整してみようと思います。