【CSS】contentで画像が表示されない時の解決策

この記事では、CSSの「content」で画像が表示されない時の原因と対処法について解説しています。contentを使って画像を表示しようとしている方は要注意、今まさに問題にぶち当たっている方はこの記事で解決しましょう。

画像自体は普通にタグを使って表示すればいいのですが、理由あってそれは使えないなんてこともあると思います。そんな時、「contentに画像を指定すれば表示させれるんじゃね」って思う方もいると思います。ただ、その方法だと問題があるんですよね、忘れがちなので備忘録として残しておきます。

目次[ click ]

疑似要素で画像が表示されない原因

#sample {
  content: url(sample.jpg);
}

contentの値には文字列以外にも画像を指定することができます、上記のようにすれば疑似要素を使って画像を表示させることができますが、対応していないブラウザも存在します。

例えば、InternetExplorerやFireFoxの一部バージョンだと表示されません、逆にChromeだと表示されます、これはwebkit系のブラウザかどうかで変わります。最近だとバージョンも上がって表示されない事は基本ないと思いますけどね。

#sample {
  content: url(sampl.jpg);
}

画像パスの指定が間違っていると表示されません（上記の場合はファイル名が間違っている）、相対パスだと勘違いから指定ミスが起こりがちなので絶対パスで指定することをオススメします。