そもそもキーワードを入れて検索しにくい内容なんだと思うのだが、HTMLで<img>そのものにCSSでbackground-imageを設定しようとする人はいないのだろうか。軽く検索してみたが、数分程度の検索時間では見つからなかった。
久しぶりにWebサイトの管理画面を作成した。その際サイト内に表示するアイテムの画像をアップロードできる場所があり、アイテムの説明を入れた後に画像がアップロードできる。
つまり、アップロード前に、アップロード後に表示される場所が先にできるのでアップロードされるまでは、ありがちな[no-image]と書かれた画像が表示されるようになる。
これまで機械的に、画像がなければ[no-image]画像を読み込ませたり、画像が入る場所に<div>タグなどを用意しておき、ここにCSSでbackground-imageを設定して画像がなければ自動的に表示されるようにしていたのだが、どうしても無駄にhtmlタグを増やすことが嫌いな私は、（待てよ…imgタグそのものにbackgroundって設定できないのか？）と疑問を持った。
やり方としてあまり考えられないのかもしれないし、PHPなどで画像の有無判定をしているのだから、「無ければ[no-image.png]を読みこませる」とすれば別にどうってことないのだが、思いついてしまったのだからやってみたくて仕方がない。
やりたいことはこう言うことだ。
PHPで画像の有無を判定し、画像があれば<img src=”./hogehoge.png” alt=”ほげほげ”>のように通常どうり出力し、画像がなかった場合には<img alt=””>のようにsrc=〜の部分を入れないようにする。<img src=”” alt=””>とsrc属性とalt属性を共に空にする。
そして、CSSでは全ての<img>タグに画像のサイズとbackground-imageで[no-image]画像を予め貼り付けておく。
こうしておけば、画像がなければ自動的に[no-image]が表示されることになる。ただし、問題が一つだけ。
CSSでpaddingが設定できない。これを設定してしまうと画像の外側に背景画像の一部が見えてしまうからだ。デザインとして昔の写真のように画像の外側に白フチを回すなどの処理をpaddingで余白をつけ、border(もしくはoutlineやbox-shadow)で設定したい場合は、borderで白フチ回しを作りbox-shadowもしくはoutlineをつけると良いだろう。
少々トリッキーなコーディングなのかもしれないが、無意味に<div>で囲む必要もないし、画像一覧で画像がないアイテムが複数存在する場合は都度画像を読み込まずに済むのはメリットではないだろうか。
