HP作成で背景画像を設定する方法で問題が発生しました。解決策を教えてください。

前へ 次へ
このQ&Aのポイント
  • HP作成で背景画像を設定する方法で問題が発生しました。スタイルシートCSSで試みたが、画像がスクロールしてしまい表示できない。
  • HTMLタグで背景画像を設定しても、画像はスクロールしてしまいます。
  • どなたか解決方法を知っている方いましたら、教えて頂けると嬉しいです。
回答を見る
  • ベストアンサー

HP作成で背景画像を設定する方法ですが、うまくいきません。

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_2.jpg); background-attachment: fixed; color:#000000; }</style> </head> <body> <div>&nbsp;</div> <p>&nbsp;</p> </body> </html> どなたか解決方法を知っている方いましたら、教えて頂けると嬉しいです。

  • p_34
  • お礼率15% (2/13)
  • HTML
  • 回答数4
  • ありがとう数7

質問者が選んだベストアンサー

  • ベストアンサー
  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.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 も利用出来ますよ。

p_34
質問者

お礼

無事解決できました。 まだまだ知識不足なものですみません；ちゃんと調べます。 丁寧な回答どうもありがとうございました。

その他の回答 (3)

  • naokita
  • ベストアンサー率57% (1008/1745)
回答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>

p_34
質問者

補足

↑の繰り返しリピート～の方法で試したところ、うまくいきました。 あと、表示させる位置なのですが…background-positionかcenter～で 位置を決める方法が二通り？あるそうですが、これもタグ打ちをする必要がありますか？ できれば、そのタグも書いてくださると助かります。 何回も質問してすみません。

  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.2

ブラウザは、IE6じゃないですか？ 「 IE6 fixed 」で検索してみましょう。 その前に、 <div>&nbsp;</div> <p>&nbsp;</p> しかなければ、スクロールバーすら出ませんけど（ fixedの意味が無い ）

p_34
質問者

補足

付け忘れてましたが全くの初心者です。 見よう見まねでやってるのでよくわかりません。 背景画像を設置するにはfc2HP機能にはありませんか？ 他のサイトさんを見るとできてるところがいるので、何かしら方法が あるのかもしれません。 HTMLタグで設置するしかないのでしょうか？ わかりやすい説明お願いします。

  • 345itati
  • ベストアンサー率48% (795/1639)
回答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_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>

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • 背景色を指定したのに反映されません。

    CSSは外部ファイルに記述しています。 画像のように色をつけたいのですが、うまくいきません。 上端から150pxです。テキスト・画像を表示しないで背景色のみの表示もできますでしょうか? ・HTML <body>間のみ ※<head>間に<link rel="stylesheet" href="sample.css" type="text/css">の記述はあります。 <body> <div class="color1"><p class>文字など（できれば入れない）</p></div> </body> ・CSS（sample.css） <style type="text/css"> div.color1 { width: 100%; height: 150px; color: black; background-color: blue; } </style> 同じ階層?に両ファイルはあります。

    • ベストアンサー
    • CSS
  • CSSで背景画像を設定する

    <html> <head> <title>--------</title> <style type="text/css"> body{background-image:url(image/-----.jpg)} </style> </head> ～～～ 画像を設定しましたが別のファイルではこの設定で表示できましたがこのファイルでは背景画像が設定できません。

    • ベストアンサー
    • HTML
  • ホームページ作成

    背景を右下に設定する時は <style type="text/css"> <!-- body{ background-image: url(背景画像のURL); background-attachment: fixed; background-repeat: no-repeat; background-position: right bottom; } --> </style> を<head>から</head>までに書けばいいと書いてあったので <html> <head> <meta http-equiv="content-type" content="text/html; charset=EUC-JP"> <title>無題</title> <meta name="generator" content=" 6.0.0.49"> <style type="text/css"> <!-- body{ background-image: url(背景画像のURL); background-attachment: fixed; background-repeat: no-repeat; background-position: right bottom; } --> </style> </head> <body bgcolor="white" text="black" link="blue" vlink="purple" alink="red"> <p style="line-height:150%;">&nbsp;</p> </body> </html> と書きましたがダメでした。 どこが間違っていますか？ またどうすれば直るか教えてください。 当たり前ですが、「画像URL」のところはちゃんとアドレスに置き換えました。

  • 画像の貼り方教えてほしいです

    CSSの画像の貼り方がわかりません body{ background-color: #f2f2f2; padding: 0; margin: 0; } div#container { width: 700px; padding: 0; margin-left: 150px; background-color: white} div#header { background-color: blue; badkground-image: url(画像.jpg); width: 640px; height: 233px ｝ 画像の部分のCSSはこんな感じです。 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" lang="ja"> <head> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="roll.css" type="text/css" media="all" /> </head> <body> <div id="container"> <div id="header"> </div> <div id="menu"> <ul> <li><a href="#">web</a></li> <li><a href="#">title1</a></li> <li><a href="#">title2</a></li> <li><a href="#">css</a></li> <li><a href="#">seo</a></li> </ul> </div> <div style="clear:both; "></div> </div> </body> </html> こうなってます。 ここまで何が間違っているかわかりません。 初心者ですがどなたかわかる方よろしくお願いします。

  • css初心者です。背景画像の固定について

    現在、壁紙として配置した画像を固定させようとして苦戦しています。以下の記述にて試みましたがうまく行きません。他のrepeat属性などはうまく行くのですがこれだけうまく行きません。お心当たりございましたら、よろしくお願いします。 また、cssについて「あとあと変更修正などがらくになる」と言う文章を読みましたが これは外部cssについてのみ言える事なのでしょうか？外部はcssを変えるだけで自動的にhtmlに反映されますが、以下の例はhtmlに直接書き込んでいるため、例えば複数の共通スタイルを持っているhtmlの場合だとそれぞれをまたいちいち書き換えなければ行けない事になるのでしょうか？重ねてよろしくお願いします。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <title></title> <style type="text/css"> body { background-image: url('akete.jpg'); background-attachment: fixed; color: #22bb44; } </style> </head> <body> <h1>壁紙の指定</h1> <p>画面がスクロールしても背景画像を固定するためには、 background-attachment属性を使い、fixedを指定します。</p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> <p>bbbbbbbbbb</p> </body> </html>

    • ベストアンサー
    • HTML
  • divで作成したレイアウトに背景画像を付けたいが付けられない

    divでレイアウト作り背景画像を入れたいのですが背景画像が思うように適用されません。 以下のようなサイトのように、作成したレイアウトのコンテンツ部分（真ん中白い背景色部分）に背景画像をつけたいのですが、色々やってみたのですが背景画像が適用されません。 参考サイト：http://www.realbit.net/rb_results/index.html 私のソースコードは以下です。 HTML <body> <div id="header"> <p>ヘッダー</p> <p>あああ</p> </div> <div id="container"> <div id="incontainer"> <div id="main"> <p>メイン</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> </div> <div id="leftMenu"> <p>左メニュー</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> </div> </div> <div id="rightMenu"> <p>右メニュー</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> <p>あああ</p> </div> </div> <div id="footer"> <p>フッター</p> <p>あああ</p> <p>あああ</p> </div> </body> CSS #header { background-color: #FF3; width: 920px; margin-right: auto; margin-left: auto; } #container { background-color: #F00; width: 920px; margin-right: auto; margin-left: auto; } #incontainer { float: left; width: 720px; } #main { float: right; width: 520px; background-color: #900; } #leftMenu { background-color: #00F; float: left; width: 180px; margin-left: 20px; } #rightMenu { float: right; width: 180px; background-color: #FF9; margin-right: 20px; } #footer { background-color: #F0F; clear: both; width: 920px; margin-right: auto; margin-left: auto; } 参考サイトのようにコンテンツ部分に背景画像を入れたい、私の場合container部分にフォトショップで作成した背景画像をいれたいのですが、まずは実験的に、上記のように背景画像を入れる前に赤い背景色を入れて見ましたが赤い背景が出てきません。背景画像もためしに入れてみましたが適用されません。 なにが間違っているのでしょうか？

    • ベストアンサー
    • HTML
  • ドリームウィーバで背景画像が表示できない

    デザインでは表示されているのですが、 ブラウザで確認しようと思っても背景画像が表示されません。 コードです。 <style type="text/css"> <!-- body { background-image: url(../../%E3%83%87%E3%82%B9%E3%82%AF%E3%83%88%E3%83%83%E3%83%97/%E5%95%86%E5%93%81%E5%86%99%E7%9C%9F/top10.JPG); background-color: #000033; background-repeat: no-repeat; background-position: 50%; } #contents { height: 454px; width: 600px; margin: auto; margin-top: 18px; } --> </style> </head> <body> <div id="contents"> <h1></h1> <h2></h2> </div> </body> </html> なにが原因なのでしょうか？ 教えてください。

  • cssとhtml内のdiv要素だけで画像を表示するには

    こんばんは。昨日からcssを始めてみたのですが、 早速壁にぶつかってしまいました。 くだらない質問と思われるかもしれませんが、お暇なかた よろしければご回答ください。 ほとんどのブログでは、htmlをいじることはできず、 css編集のみとなっています。 cssのみで画像を表示させたく、div要素を定義して、 それにcssを設定しようとしたのですが、うまくいきません。 以下失敗したままのサンプルを提示しますので、 間違っている箇所がありましたら、ご指摘ください。 /*cssだお*/ body.imiji { background-image:url(画像のurl); } .image { background-image:url(画像のurl);　←問題の箇所 } p.color { color:blue; font-family:"メイリオ" !important; } <!--html--> <html> <head> <title>ふぁぶ </title> <link rel=stylesheet type="text/css" href="fab.css"> </head> <body class="imiji"> <div class="image"></div>←←問題の箇所 <p class="color"> もうホントに勘弁して </p> </body>

  • FC2ホームページの背景色が変わりません！

    FC2ホームページの背景色が変わりません！ もう本当にわからないのでこちらで質問させて頂きます。 FC2にて今ホームページを作っているのですが、どんなにしても背景の色が変わらないのです。 画像を添付したページを作っていて背景の色を黒にしたいのですが、htmlで<body の後に色の指定をして、その後はちゃんと変わっているのです。ブラウザで確認してもちゃんと黒になっているんですが、ディレクトリに保存すると背景は変わらないままになっているのです・・・！ １日前に他の同じ様な画像ページを作っていた時はちゃんと黒になって保存もちゃんとできたのですが・・・ 色々検索もしてcssでも試してみましたが、それもやっぱり１回はちゃんと背景色変わるのですが、保存すると白くなってしまいました・・・。 なにか原因があるのでしょうか？ とりあえずhtmlのせておきます・・・ <html dir="ltr"> <head> <title></title> </head> <body> <p style="text-align: center; "><span style="color: rgb(192, 192, 192); "><span style="font-size: smaller; ">タイトル</span></span></p> <p style="text-align: center; ">&nbsp;</p> <p style="text-align: center; "><span style="background-color: rgb(0, 0, 0); "><img width="400" height="400" alt="" src=画像のURL /></span></p> </body> </html> 上の<body の後にbgcolor="#000000"> とちゃんと記入するのですが、保存した後ソース見るとbgcolor="#000000"が消えているのです・・・ サイト作りは本当に初心者なので何か間違っているのかもしれません。 しかし原因が本当にわからないので・・・似た様な経験されてる方、なにかご存知な方いましたら回答お願い致します！

    • ベストアンサー
    • HTML
  • ページのトップへの画像

    ページのトップへの画像をcssにしようと思っています。 現在 ＝＝＝ html ＝＝＝ <html lang="ja"> <head> <meta charset="utf-8"> <style type="text/css"> <!-- div.box { width: 90%; height: 20px; color: #ffffff; background-color: #000000; padding: 3px 10px 3px 10px; } .gotop { float: right; padding-top: 3px; } --> </style> <title>Title Box</title> </head> <body> <div class="box"><a href="#top" class="gotop"><img alt="gotop" src="gotop.png"></a>Title Box</div> </body> </html> のようになっているソースを画像を指定してのcssに変えたいと思っていますがうまくできません。 上手にする方法を教えてください。

    • 締切済み
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する