背景に半透明を配置したいとき、PNG画像を用いるが、
IE7での配置の際に気をつけることが見つかったので、メモとして。

背景画像にPNG画像(半透明)を配置したいときに気をつけなきゃいけないことがある。
それは画像のリピート。

こちらの記事実験をいろいろしていると記述違いがありました。

感覚として、極端な話、
1ピクセル×1ピクセルの半透明PNGを用意すれば、あとはリピートでなんとかなるというような感じになるが実はIEではうまくいかないことが判明。
1ピクセル×1ピクセルのときはなめらかに動くが、これを5ピクセル×5ピクセルにするとうまくいかないことが判明。
うまくいかないというか、スクロールなどをしたときに、ものすごいガタつく。カクンカクンと動く。これはIE7で言えることで、IE8になったときにどうなのかはまだ検証していない。
このガタつきをなくすためには、背景画像のリピートを1方向にするのがいい。

例えば、900px幅のコンテンツがあったとする。
このとき横幅900pxで背景用透明PNGを作成し、background-repeatをrepeat-yにすれば滑らかになる。これを
1px幅の画像を作り、repeatに指定してしまうと、すごくもたつく。
1ピクセルのときは問題が感じられないが、5ピクセルにするともたつく。
コンテンツ内容によると思われるけど、これは結構見た目の上で重要かな・・・。


一応実験してみてるので、参照のこと。
中身があまりな感じなので、読み込みのタイミングでのもたつき程度しか見えませんが。。。

Ex:1px
http://sevenstyleweb.com/labo/pngtest/1x1.html

Ex:5px
http://sevenstyleweb.com/labo/pngtest/5x5.html

Ex:900px
http://sevenstyleweb.com/labo/pngtest/900x5.html