cssで画像のパスを指定する場合

質問

cssで画像のパスを指定する場合は、background-imageでいいのでしょうか？

今は
img.sample {
background-image: url("http://test.jpg")
のようにやっていますが
昔やった方法は
background-image
ではなく
srcを使っていた気がします。

background-imageでも問題なく表示されますが、
<img class="sample">
のように、imgタグを使っているのだから、srcのほうがいいのかな、と思ってしまいます。

実際はどちらがいいのでしょうか？

回答No.1

ORUKA1951

画像がそのページにおいて、主たる内容である場合は<img src="" width="" height="" alt="">で指定しなければなりません。
　そうではなく画像が背景の場合は、background-image:で指定します。
　これは、HTMLが守るべき目標に｛構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )｝があるからです。また、スタイルシートの概説( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )にも
・テキストを画像に置き換えて表現する。
・余白制御のために画像を用いる。
　などは否定されています。

　ナビゲーションのリンクをボタンやアイコンの画像で表示するような場合は、<a href="/products">製品</a>として、スタイルシートで
a[href="/products"]{display:inline-block;width:160px;height:80px;background:url(/images/icon/products.gif) no-repeat blue;}と指定する。
　アルバムのように画像自体がコンテンツである場合は、当然<img src="" width="" height="" alt="">で指定することになりますね。