"CSSのみ"でdiv要素に画像を設定する

background-imageプロパティに以下のような感じで値を設定すればよい.

.target{
    width:/*ImageWidth*/;
    height:/*ImageHeight*/;
    background-image: url(Octcat.png);
}

しかしこれで"CSSのみ"で画像を設定したと言えるだろうか?
画像ファイル(Octcat.png)を使ってしまっているため"CSSのみ"とは言えないだろう.
そこで解決策はこれである.

実用的な解決策

データURIスキームを使う方法.
画像をbase64エンコードした後background-imageに設定する.

.target{
    width:/*ImageWidth*/;
    height:/*ImageHeight*/;
    background-image:url(data:image/png;base64,iVBORw0KGg/*中略*/5CYII=);
}

ネタ的な解決策

box-shadowを使う方法.
利点をあえて挙げるならdataURIバージョンよりcssファイルの容量が少ない.

.target{
    width:/*ImageWidth*/;
    height:/*ImageHeight*/;
}

.target:after{
    content: "";
    display: block;
    width:1px;
    height:1px;
    background:rgba(255,255,255,0);
    -webkit-box-shadow:
    12px 12px 0 12px rgba(255,255,255,0),
    212px 13px 0 0 rgba(32,31,31,0.06),
    213px 13px 0 0 rgba(32,31,31,0.39),
    /*中略*/
    431px 651px 0 0 rgba(124,186,230,0.06),0 0;
}

box-shadowプロパティとafter疑似要素を駆使することによって画像を作成している.

画像からこのスタイルシートに変換するプログラムはImageToCssを使用している.

まとめ

どちらの方法も画像は読み込まずcssのみで画像を設定できている.
後述の方法はほとんどネタなのであまり使わない方がよい.
どちらを使う場合でも大きすぎる画像の場合はリサイズしたり圧縮したりすると良い.