カテゴリー中に説明的な画像を挿入する方法についての考察

dgafadfad

カテゴリー中に画像を挿入する方法についての考察です。通常は、画像を追加するにしてもカテゴリーの各項目の左側に「list-style-image」や「:before」、「background-image」等でアイコンをつける程度だと思うのですが、もう少し、説明的な、大きな画像を追加できないか、といった観点から検討してみました。
インターネットエクスプローラでは表示されなかったので、「考察」という形での公開です。

例えば、以下の CSS をカスタムスタイルシートエディターに追加すると

#supplementary li.cat-item-159138289:after {
	content: "";
	background-image: url('http://comemo508forum.files.wordpress.com/2013/04/gfsdfgsdf.jpg');
	display: list-item;
	width: 80px;
	height: 60px;
	background-size: contain;
	vertical-align: top;
	margin: 5px;
}

mac の safari では、以下のように表示されます。

dgafadfad

しかし、ie (インターネットエクスプローラ)では、バージョン 10 であっても表示されません。CSS の優先順位の付け方のミスなのかもしれず、原因の方はよくわかりません。

image

なお、「background-size: contain」というのを使うと、背景画像が枠内に収まってくれます。

参照:(background-image:contain のデモ)|CSS3 background-size Property|W3Schools

#2013