- ベストアンサー
HP作成で背景画像を設定する方法で問題が発生しました。解決策を教えてください。
- HP作成で背景画像を設定する方法で問題が発生しました。スタイルシートCSSで試みたが、画像がスクロールしてしまい表示できない。
- HTMLタグで背景画像を設定しても、画像はスクロールしてしまいます。
- どなたか解決方法を知っている方いましたら、教えて頂けると嬉しいです。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
NO.2.3の回答者です。補足拝見済み。余計なお世話かもしれませんが、 ウェブサイトをこれからどんどん作り上げていくのだと思うのですが、 背景画像は、初歩の初歩で、この辺を自分で解決できないと先に進めませんよ。 調べ方は、「 CSS background 」などでググる事。 それと、最低でもHTMLやCSSの参考書の１冊は用意しましょう。 2,000円前後～3,000円未満です。 自分の場合、CSSの参考書は穴があくほど読み、その都度、試用・応用しましたよ。 最初にしっかり基礎や理屈を覚えないと後から何度も失敗するでしょう・・・ 部分的な要素だけは、その都度ウェブ検索で調べれば良いです。 ------------------------------------------- ＞これもタグ打ちをする必要がありますか？ 指定や命令してあげないと表示されないですよ。勝手に動かれたら大変でしょ？ background-positionの例は、 background:#f0f0f0 url(2008_6_27_059syuku_2.jpg) no-repeat center center; background:#f0f0f0 url(2008_6_27_059syuku_2.jpg) no-repeat 100px 300px; background:#f0f0f0 url(2008_6_27_059syuku_2.jpg) no-repeat 30% 50%; 細かい部分は自分で調べて下さいね。 先の fixed も利用出来ますよ。
その他の回答 (3)
- naokita
- ベストアンサー率57% (1008/1745)
NO.2の回答者です。補足拝見済み。 初心者じゃないので簡易機能は知りません。 何をどうしたいのでしょうか？ 何が出来ていないのでしょうか？ 現在は、その設定でスクロールしないはずですから、出来ているって事です。 理由は、スクロールバーが出ないほどコンテンツ（文章や中身）が無いから。 仮に、表示出来ないほどのコンテンツが下部まで隠れるほどあればスクロールバーが出ますが、現在の設定では背景画像はスクロールしないはずです。 例えば、 <div styke="padding-bottom:1400px"> <h1>ああああ</h1> </div> とすれば、スクロールバーが出るので比較出来ます。 ちなみに、 IE6ならスクロールされるので別対応が必要だから切り捨てた方が良いかも。 ------------------------------- まさか、スクロールってのは、繰り返しリピートの事かな？ それなら <style type="text/css"> body { background:#f0f0f0 url(2008_6_27_059syuku_2.jpg) no-repeat; color:#000000; } </style>
補足
↑の繰り返しリピート～の方法で試したところ、うまくいきました。 あと、表示させる位置なのですが…background-positionかcenter～で 位置を決める方法が二通り？あるそうですが、これもタグ打ちをする必要がありますか？ できれば、そのタグも書いてくださると助かります。 何回も質問してすみません。
- naokita
- ベストアンサー率57% (1008/1745)
ブラウザは、IE6じゃないですか？ 「 IE6 fixed 」で検索してみましょう。 その前に、 <div> </div> <p> </p> しかなければ、スクロールバーすら出ませんけど（ fixedの意味が無い ）
補足
付け忘れてましたが全くの初心者です。 見よう見まねでやってるのでよくわかりません。 背景画像を設置するにはfc2HP機能にはありませんか？ 他のサイトさんを見るとできてるところがいるので、何かしら方法が あるのかもしれません。 HTMLタグで設置するしかないのでしょうか？ わかりやすい説明お願いします。
- 345itati
- ベストアンサー率48% (795/1639)
そのままのソースでサンプルページを作成しましたが、背景は固定されていてスクロールされませんが。(MacOSX10.5＋Firefox3.6.3) 検証したブラウザを教えて頂ければ補足出来そうですが。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja-JP"> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <title>サンプル</title> <style type="text/css"> body { background-color:#f0f0f0; background-image:url(http://ravensky34.web.fc2.com/2008_6_27_059syuku_2.jpg); background-attachment:fixed; color:#000000; } </style> </head> <body> <div>あああああ</div> <p>あああああ<br>ああああ<br>ああああああ<br>あああああ<br>あああああ<br>あああああ<br>ああああああ<br>あああああああ<br>ああああああ<br>あああああああ<br>あああああああ<br>ああああああ</p> <div>あああああ</div> <p>あああああ<br>ああああ<br>ああああああ<br>あああああ<br>あああああ<br>あああああ<br>ああああああ<br>あああああああ<br>ああああああ<br>あああああああ<br>あああああああ<br>ああああああ</p> <div>あああああ</div> <p>あああああ<br>ああああ<br>ああああああ<br>あああああ<br>あああああ<br>あああああ<br>ああああああ<br>あああああああ<br>ああああああ<br>あああああああ<br>あああああああ<br>ああああああ</p> <div>あああああ</div> <p>あああああ<br>ああああ<br>ああああああ<br>あああああ<br>あああああ<br>あああああ<br>ああああああ<br>あああああああ<br>ああああああ<br>あああああああ<br>あああああああ<br>ああああああ</p> <div>あああああ</div> <p>あああああ<br>ああああ<br>ああああああ<br>あああああ<br>あああああ<br>あああああ<br>ああああああ<br>あああああああ<br>ああああああ<br>あああああああ<br>あああああああ<br>ああああああ</p> <div>あああああ</div> <p>あああああ<br>ああああ<br>ああああああ<br>あああああ<br>あああああ<br>あああああ<br>ああああああ<br>あああああああ<br>ああああああ<br>あああああああ<br>あああああああ<br>ああああああ</p> </body> </html>
お礼
無事解決できました。 まだまだ知識不足なものですみません；ちゃんと調べます。 丁寧な回答どうもありがとうございました。