背景画像を、flashを使わずウィンドウの可変に対して拡大縮小か、CSSなどでグラデーションを中央から外側にかける方法

解決済

質問者：nancotsu
質問日時：2009/11/25 20:14
回答数：1件

作りたいと思っているサイトの背景設定に関していくつか質問です。
<作りたい背景画像について>
中央から四方外側に向かってグラデーションがかかっている背景画像
（添付画像参照）

<サイトデザインに関して>
ウィンドウいっぱいに背景画像を表示し、ユーザーの可変に対して背景画像が縮小拡大できる
flashは使いたくない。

<わからなくて困っている事>
(1) 背景画像をリサイズする方法として下記のサイト↓があり、
この方法で背景画像を設定してみました。
http://www.webbibo.com/stylesheet/image/bg_dimen …
しかし、IE6以上で見るとウィンドウの右側と下部に背景が足りておらず、
ウィンドウいっぱいに背景画像を見せる事ができません。

いろいろ調べてみたのですが、IE対策方法がわかりません。
IEではこのリサイズ方法で完全に背景画像をウィンドウいっぱいに表示させる事は不可能なんでしょうか？
可能ならば、設定方法はどうすればようのでしょうか？

(2) (1)の解決案として、
IEの場合のみ背景画像のグラデーションを諦めて単色カラー表示し、
その他のブラウザで上記サイトの方法を使用して背景画像をみせると言う方法を考えています。
しかし、設定の仕方がわからず、途方に暮れています。

(3) (1)のリサイズ方法を使わなくても、添付した画像のような背景のグラデーションを背景として見せる事は可能でしょうか？
　可能ならば、どういう方法があるんでしょうか？
背景のグラデーション表示方法に関してCSSなどでグラデーションを作る方法がありますが、上下や、左右方向などのグラデーション表示方法はありましたが、中央から四方外側の方向の設定方法がわかりませんでした。

自力で色々調べていたんですが力足らず、質問させていただきました。
宜しくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

No.1ベストアンサー

回答者： kyo999
回答日時：2009/11/25 21:57

(1)のサイトのサンプル、Firefoxでも常にではありませんが下部が足りない事がありますね。

ここのサイトを参考にしてはどうでしょうか？
http://www.galeriedepop.com/
JavaScriptでブラウザのリサイズのたびに画像サイズを計算・設定しています。
FirefoxでもIEでもブラウザいっぱいに背景画像が表示されます。

●HTML部分
<body>


<div id="bg"><img id="bgimage" width="" alt="" src="/bgimg/background_top.jpg" /></div>


●CSS（関連するもののみ）
http://www.galeriedepop.com/common/css/backgroun …

●JavaScript（関連するもののみ）
http://www.galeriedepop.com/common/js/bgimage.js

●トップページの背景画像
http://www.galeriedepop.com/bgimg/background_top …

この回答への補足

kyo999さん

回答いただいたサイトを参考にページを作ってみました。
しかし、
ウィンドウの上部と左側に背景画像が拡大縮小されず、白く表示されてしまいます。
紹介頂いたサイトを見る限り、背景画像はちゃんと拡大縮小しています。
しかし、そのサイトをページ保存して動作確認させてもらったんですけど、
やはり、上部と左側の背景が拡大縮小されずに白く表示されていました。
これは、他に何か設定が必要ということなんでしょうか？
私では全くわかりません。
お助け下さい。
宜しくお願いします。

補足日時：2009/11/28 18:47

通報する