- ベストアンサー
外部CSSで背景画像を表示させる方法
外部CSSについての質問です。 ホームページを作成するにあたり、外部CSSを使用しているのですが、背景画像が表示されません。 普通の（固定なし）背景画像はきちんと表示されるのですが、「背景画像を固定する」タグだと表示されません。 ソースは間違っていないし、何度やっても表示されず、こちらで質問することにしました。 固定方法は、パーセントで指定する方法です。 どなたかご指導頂けないでしょうか？ よろしくお願い致します。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
#3の方の回答と被りますが、外部CSSファイルで画像などのURIを相対URIで指定する場合は、その外部CSSファイルから見た画像ファイルの相対URIを記述します。 この位置関係は、正確に記述されているでしょうか? もし外部CSSを[style]ディレクトリなどに収めて管理していて、HTMLファイルの方で記述したスタイル要素の内容をそのままコピーしていたなら、おそらくCSSファイルと指定のファイルとの相対パスが一致しないことが原因でしょう。 余談ですが、Netscape Communicator 4.xxでは、このスタイルシートの実装にバグがあって、CSSファイルに記述してある相対URIを、その外部CSSファイルを基準とした相対URIとしてではなく、その外部CSSを読み出したHTMLファイルを基準として相対URIを参照します。 その結果、NN4では外部CSSファイルと違うディレクトリに収めたHTMLファイルでは背景画像がうまく表示できないという事態も起きますので、このブラウザで閲覧することを想定している場合は、注意が必要です。
その他の回答 (3)
- Bo_Bo
- ベストアンサー率65% (97/149)
HTMLファイルとCSSファイルの参照する画像パスへの相対関係が違っていませんか？ └ CSSファイル ├ [images] │ └ xxx.gif └ [documents] └ HTMLファイル ■ HTMLファイル内で指定した場合： <body style="background-image: url(../images/xxx.gif)"> → 正常に参照できる ■ CSSファイル内で指定した場合： body { background-image: url(../images/xxx.gif) } → 正常に参照できない ( ../ 部分) body { background-image: url(./images/xxx.gif) } → 正常に参照できる ( ./ 部分) これでどうでしょう。
お礼
ご回答ありがとうございます！ 早速試してみましたが、できました！
- the845t
- ベストアンサー率33% (246/743)
背景画像のURLの個所を、絶対パス（http://で始まるアドレス）でやってみるとどうですか？
補足
まだドメインを取得していないので…一応パソのアドレスでやってみましたが、できませんでした。
- the845t
- ベストアンサー率33% (246/743)
普通の（固定なし）背景画像は・・・ というのはこれもCSSで指示したものですか？ 違うのであれば、単にスタイルシートでの壁紙の指定法を間違えているのでは？
補足
固定なし画像（つまり繰り返し画像）はbodyタグに入れています。 スタイルシートのタグは body{background-image:url(背景画像のURL); background-attachment:fixed; background-repeat:no-repeat; background-position:80% 80%;} …です。 外部ＣＳＳで指定すると表示されないのですが、ページのソースの<head>～</head>内に入れると表示されるんです。
お礼
ご回答ありがとうございます。 なるほど、外部CSSからのURLを記述するんですね。HTMLファイルからの画像URLを記述していました。 ネスケではレイアウトが崩れてしまうことは存じております。そういったことも考慮したサイトを作っていきたいと思います。 丁寧なご回答、心より感謝いたします。