IE6の背景フルスクリーン

※この記事は11年以上前の記事です。
現在は状況が異なる可能性がありますのでご注意ください。

本当にIE6ほど厄介なブラウザはない。
だいたい、もうIE6を使ってる人は約1％ほどしかいない（らしい）ってのに、なんでそれに対応せなあかんねん。制作時間二倍はかかるんだよ！？

・・・さて本題に入ろう。
HTMLのコーディングの際、背景を画面いっぱいに表示してほしい、というのはよくある依頼である。
今であれば、JQueryを使ったプラグインがフリーで多数落ちているので、さほど苦労しなくても実装できる。

bgStretcher
http://www.ajaxblender.com/bgstretcher-2-jquery-stretch-background-plugin-updated.html

BACKSTRETCH
http://srobbin.com/jquery-plugins/backstretch/

maxImage Scaling Plugin
http://www.aaronvanderzwan.com/maximage/
参考記事：http://blog.daichifive.com/archives/748

Anystretch
https://github.com/danmillar/jquery-anystretch
参考記事：http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-jquery-anystretch.html

僕は今回の案件ではAnystretchってやつを使いました。DIVにも使えるから具合がいい。
また、モダンブラウザであれば、CSS3を使ってフルスクリーン背景を実装できる。
（ごめんなさい、いい記事見つからなかった・・・）

・・・しかし、実は上記のいずれのプラグインでも方法でも、IE6ではフルスクリーンは実装できない。
プラグインに関しては、一応は、IE6対応とうたっているプラグインも、実際に使ってみると、背景が途中で切れたりなど、そもそも動かなかったりなど、正直厳しい・・・。

それでは、IE6ではフルスクリーン背景はできないのか・・・？
Flashを使うしかないのか・・・？

そんな事はない！
まだ無理矢理やる方法がある！
そう、言わずと知れた、IEの独自仕様である、filterを使う方法である！

CSS3のみでフルスクリーンの背景画像を実装する方法まとめ3つ

あ、三つあるの・・・？
おほん、
僕も、今回の案件には、このfilterを使う方法を使わせていただきました。

html {
	...
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='画像のパス', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='画像のパス', sizingMethod='scale')"; 
	}

スターハックなどを使ってIE6のみ、このfilterを使って背景をフルスクリーンで表示できる。
ただし、ブラウザのサイズを変えると、縦横比が変わってしまう・・・。（泣）
だが、そこは、表示できるんだからマシだと、目をつぶっておこう（自分に言い聞かせ）

なんにせよ、ここまでくるのに、実に5、6時間かかった・・・。
（主にJavascriptきかねぇ～って叫んでた）
これを見たWEBデザイナーが、1時間以内でできちゃったりしたら、幸いなことこの上ない。

最後に、このfilterを使う時の注意点だが、画像のパスは、CSSを読み込んでいる"HTML"からのパスとなるので注意していただきたい。
これは、Javascriptからファイルを読む時や、PIEなどのetcファイルをCSSに読み込む時と同様である。

解決して嬉しかったからつい長くなっちまったｗ