HP作成で背景画像を設定する方法ですが、うまくいきません。
スタイルシートCSS等でいろいろサイトを見て試しましたが、
画像がどうしてもスクロールしてしまい、思ったように表示できません。
http://ravensky34.web.fc2.com/test.html
HTMLタグでいくら設定しても画像が表示されないか、
↑のように画像が必ずスクロールしてしまいます。
ソースは↓です。
<html>
<head>
<title>文書のタイトル</title>
<style type="text/css">
body {
background-color:#f0f0f0;
background-image:url(http://ravensky34.web.fc2.com/2008_6_27_059syuku …
background-attachment: fixed;
color:#000000;
}</style>
</head>
<body>
<div></div>
<p></p>
</body>
</html>
どなたか解決方法を知っている方いましたら、教えて頂けると嬉しいです。
No.4ベストアンサー
- 回答日時:
NO.2.3の回答者です。
補足拝見済み。余計なお世話かもしれませんが、ウェブサイトをこれからどんどん作り上げていくのだと思うのですが、
背景画像は、初歩の初歩で、この辺を自分で解決できないと先に進めませんよ。
調べ方は、「 CSS background 」などでググる事。
それと、最低でもHTMLやCSSの参考書の1冊は用意しましょう。
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 も利用出来ますよ。
No.3
- 回答日時:
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~で
位置を決める方法が二通り?あるそうですが、これもタグ打ちをする必要がありますか?
できれば、そのタグも書いてくださると助かります。
何回も質問してすみません。
No.2
- 回答日時:
ブラウザは、IE6じゃないですか?
「 IE6 fixed 」で検索してみましょう。
その前に、
<div></div>
<p></p>
しかなければ、スクロールバーすら出ませんけど( fixedの意味が無い )
この回答への補足
付け忘れてましたが全くの初心者です。
見よう見まねでやってるのでよくわかりません。
背景画像を設置するにはfc2HP機能にはありませんか?
他のサイトさんを見るとできてるところがいるので、何かしら方法が
あるのかもしれません。
HTMLタグで設置するしかないのでしょうか?
わかりやすい説明お願いします。
No.1
- 回答日時:
そのままのソースでサンプルページを作成しましたが、背景は固定されていてスクロールされませんが。
(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 …
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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
「諸要素」とはどういう意味で...
-
【ヒトの神秘】美男美女から何...
-
タグは大文字と小文字どちらが...
-
超音波で洗脳。
-
textareaの幅を画面と合わせたい
-
改行ほどは行かないけど、若干...
-
emとstrongの反対
-
brタグ、pタグやtableタグが非...
-
NからZへの全単射を具体的に構...
-
smallにtext-allignが効かない
-
【CSS】imgタグを、親要素の幅...
-
質問1.
-
レスポンシブサイトで、右側に...
-
エクセルでグラフにマークを入...
-
C言語線形リストの問題です
-
IEと他ブラウザでの行間について
-
ホームページの下にあるcopy ri...
-
双方向リスト
-
Bootstrap レスポンシブ textarea
-
角丸画像の背景色を透明にした...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【ヒトの神秘】美男美女から何...
-
smallにtext-allignが効かない
-
含む含まないという概念自体の...
-
還暦を過ぎた方々に質問です。
-
「諸要素」とはどういう意味で...
-
質問1.
-
textareaの幅を画面と合わせたい
-
角丸画像の背景色を透明にした...
-
2個のFormを横並びにしたい
-
テキストボックスの中にリンク...
-
HTMLです 四角みたいにして中に...
-
CSS:overflow要素の印刷について
-
input type="hidden"で取得した...
-
tdに対してmin-heightの定義、...
-
HTMLページ上でiframeを最前面...
-
タグは大文字と小文字どちらが...
-
HTMLです
-
2行にしたい要素、改行か分割...
-
改行ほどは行かないけど、若干...
-
H1タグを画像にしたい
おすすめ情報