- ベストアンサー
IE以外のブラウザで背景を固定させる方法
スタイルシートで、ブログのタイトル部分の背景を固定しています。 IE6.0では画像が表示されるのですが、NetscapeやFirefoxでは表示されず、指定してある背景色だけになってしまします。 #title {background: #000 url("画像のURL") no-repeat; background-position:top;background-attachment : fixed;} このように記述していますが、IE以外のブラウザで表示させるにはどのようにすればいいのでしょうか。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
何故Firefoxで画像が表示されないのかはわかりませんが、原因切り分けのためにプロパティを分けてみてはいかがでしょうか？ #title { background-color: #000; background-image: url("画像のURL"); background-repeat: no-repeat; background-position: top; } それと、background-attachment: fixed; を指定してしまうと、ブラウザ画面に対して位置が固定されてしまうので、「ブログのタイトル部分に固定：タイトルの文字と一緒にスクロールする」なら、background-attachmentを指定しないかbackground-attachment: scroll; じゃないでしょうか…。
その他の回答 (2)
- hikaly
- ベストアンサー率39% (47/119)
＃１です。 す、すいません。ブログの話でしたか。(^_^;) えっと、私の環境でFirefoxでtest.htmlを表示させたときに画像が表示されましたし、ari13さんの環境でもIEでは正常とのこと。スタイルシートの記述が間違っているわけではないと思います。 ブログのURLを示していただければ原因が何か分かるかもしれません。
お礼
ブログのURLを出せば早いと思うのですが・・・後で削除できないので、すみません。ご丁寧に教えて下さってありがとうございます。
- hikaly
- ベストアンサー率39% (47/119)
私のFirefox 1.04 (Windows版）だとしっかりと表示されますけど。 同じディレクトリに ・test.html ・test.css ・test.jpg を用意。 test.htmlを次のように記述。 ---- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja-JP" lang="ja-JP"> <head> <link rel="stylesheet" type="text/css" href="./test.css" /> <title>test</title> </head> <body> <h1 id="title">sample</h1> </body> </html> ---- test.cssはari13さんのスタイルシートを流用。画像のURLだけ変更。 ---- #title {background: #000 url("test.jpg") no-repeat; background-position:top;background-attachment : fixed;} ---- これでどうですか？
お礼
教えていただいたとおりにプロパティを分けたら、表示されました。ありがとうございました。