[B! JavaScript][tips] kuracomのブックマーク

[CSS]大きい画像をブラウザのサイズに合わせて背景に表示するスタイルシート

CSS-Tricksから、大きい画像を余白を作らずにブラウザのサイズに合わせて、背景に表示するスタイルシートを紹介します。 Perfect Full Page Background Image 下記、それを実装する要件とテクニックを二つ、それぞれポイントをピックアップして紹介します。実装の要件前提として、画像のサイズを調整する必要があるため、background-imageプロパティでの配置は不適格とします。それを踏まえ、以下の条件をクリアさせます。ページは画像でいっぱいに、余白は無しで画像の大きさは自動調整画像の比率は維持画像はページ中央に画像はスクロールさせないクロスブラウザ対応一つ目のテクニックは余分なマークアップが必要で、IE6用にJavaScriptを使用したものを紹介しています。二つ目のテクニックは、余分なマークアップを無くし、JavaScriptも必要と

kuracom 2009/09/11

ソース元にも書いてあるが、demo1だとsafari/chromeにおいて上下に余白が生じてしまうので要注意

リンク

web-conte.com | blue | Lightbox JS v2.0 と Flash

web-conte.comでも画像の拡大表示時に使っている「Lightbox JS v2.0」。これ、ページ内にFlashが同居していると厄介なのである。自分のサイト（ここ）だとそもそもFlashを置いていないから気づきにくい問題なのだが、先日あるサイトを作っていてこのことに気づいた。Flashオブジェクトは z-indexなどの指定を無視し、基本的にドキュメントの最前面にあるように表示されてしまうため、Flashだけは背景に追いやられず、Lightboxで拡大表示させた画像のさらに手前に出てきてしまう。このことの解決策はひとまずあって、たとえば「小粋空間: Lightbox JS でブログパーツ等の Flash を PNG 背景画像の下に隠す」などの解説が丁寧だ。要は、Flashを埋め込む際の記述のひとつに「背景を透過する」という命令にあたるものがあって、それを書き加えてやればいい。