- ベストアンサー
背景を四隅に固定する
背景の画像を右上、右下、左上、左下の全てに固定したいと思います。 過去の質問（http://oshiete1.goo.ne.jp/qa1871874.html）を見て右下と左下には固定できたのですが、 あとの２つをどうやればいいか分かりません。 どうすれば良いのでしょうか？
- natumikan8
- お礼率51% (33/64)
- HTML
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
スタイルシートの設定部分を 右上に固定する場合 background-position: right top; 左上に固定する場合 background-position: left top; で指定すればいいかと。 でも初期値は background-position: 0% 0%; で background-position: left top; と同じ意味がデフォルトなので、左上に固定ってのは特に指定する必要は無いかと。
その他の回答 (3)
- goldfox
- ベストアンサー率49% (123/249)
ANo.3氏のソースを拝借します。 <body> <div id="left"></div><div id="right"></div> <div id="left-top"></div><div id="right-top"></div> <div id="main"> <p>ほげほげほげほげ</p> <p>ほげほげほげほげ</p> </div> </body> #main{ height:100%;width:100%; overflow:auto; }
お礼
回答有難うございます！ 参考ＵＲＬ見ました。 こんな方法もあるんですね。インラインフレームのような感じでしょうか。 教えていただいたようにやってみたところ、スクロールバーのようなものが表示されるのですがスクロールされません…。 なかなかCSSやHTMLは難しいですね。 もっと勉強しなければなりません。
- 345itati
- ベストアンサー率48% (795/1639)
>body内に文字を入れて確認すると、背景が固定されずにスクロールで動いてしまいます。 <body> <div id="left"></div><div id="right"></div> <p>ほげほげほげほげ</p> <p>ほげほげほげほげ</p> <div id="left-top"></div><div id="right-top"></div> </body> こんな感じになっていませんか？ これだとそれぞれの<div>に対して背景が固定なので、ページ全体をスクロールさせると背景も動きます (<div>要素自体はスクロールされるから。 この場合、<div>に対して position: fixed; を使うと固定出来るようにW3Cは定めています。 が、fixedはFirefoxなどでは対応出来ていますが、IE6.0までのバージョンは未対応です。(IE7はまだ確認していない・・・
お礼
IE6.0では未対応なんですか…。 なかなか四隅に固定するのは思ったよりも難しいですね。 有難うございました！
- goldfox
- ベストアンサー率49% (123/249)
class名やid名に空白を使ってはいけません。 せめてハイフンやアンダーバーでつなげましょう。 あと、「表示できない」というのにはいろいろな状況が考えられますので、今の状態を詳しく書くようにしましょう。
お礼
たびたびすみません。 id名の空白をハイフンにしたところ右上と左上も表示できるようになったのですが、 body内に文字を入れて確認すると、背景が固定されずにスクロールで動いてしまいます。 過去の質問と同じように右下と左下だけでも同様です。 もし原因が分かりましたらよろしくお願いします。
補足
回答有難うございます。 今はメモ帳に書いたものををhtml形式で保存して、それを開いて表示できるか確認しています。 FTPで転送などはまだしていません。 NO.1の方の補足に書いた今の状態では、左下と右下のみに背景画像が表示されます。
関連するQ&A
- ２つの背景画像固定がうまくいきません
(1)一番下に細かい画像をrepeatさせた背景を、 (2)その上に大きい画像をno-repeatで中央に表示させ、 どちらも固定させて、その上にテキストやテーブルを表示したいのですが、(2)のbackground-attachment : fixed だけうまくいかずスクロールされてしまいます。 過去の質問に同様の内容があり、それへの回答を参考にしたのですが・・・。 http://oshiete1.goo.ne.jp/qa1133735.html どなたか解決方法を教えて下さい。
- ベストアンサー
- ホームページ作成ソフト
- ☆背景画像を２箇所に固定☆
異なる背景画像を、ウィンドウの 右上と左下に、それぞれ固定表示 させる方法って、ありませんか？？ １箇所に固定するCSSなら、 検索で見つけたんですけど。 それの右上用と左下用を 一緒に使っても駄目でした☆ やはり、壁紙には１つの画像しか 使えないものなのでしょうか…
- ベストアンサー
- CSS
- ＨＰ作成で、背景画像をページとはしとはしをあわせるには？
説明分かりづらくてスイマセン；； つまり、背景画像をそのページの端（右上・右下・左上・左下）に ピッタリとあわせるタグをおしえてください！
- ベストアンサー
- その他（インターネット・Webサービス）
- 背景を固定したいです。
ＨＰ作成初心者です。いまＨＰＢ９を使用しています。 素材サイト様での背景をダウンロードして右上に固定したいのです。 スタイルの設定で色と背景で右・上で繰り返しない・固定で 貼り付けてもスクロールして固定されません。 <head>の間にタグを入れるという入れ方もあるようですが どのように入れればいいのでしょうか？ 画像のＵＲＬをと書いてありますが直リンクに引っかかって しまうのでしょうか？ 自分の中でハッキリと直リンクの意味も把握できかねます。 過去の質問を見ても、初心者（言い訳がましくてすみません）なので 試行錯誤しても背景が固定されず頭がこんがらがっています。 よろしければ教えてください。
- 締切済み
- ホームページ作成ソフト
- Dreamweaberでの背景画像固定について
よくこちらにも質問にあがってる「背景画像」の固定ですが、回答を拝見していると、手打ちタグでの回答ばかりですよね？ 同じタグをDreamweaberで手打ち挿入してみましたが、背景固定は出来ませんでした。 （右下・左上等全部やってみましたが、どれも出来ませんでした） 画面をスクロールすると文字と一緒に画像も動いてしまいます。 手打ち挿入でなく、Dreamweaberのソフト上では出来ないものなのでしょうか？ 詳しい方いらっしゃいましたら回答お願いいたします。 こちらの環境はi Mac／OS.9.2.2です。
- ベストアンサー
- HTML
- 背景固定のタグについて
初めまして。 サイトを作っていて少し分かり辛い点があったので質問させて頂きます。 一つのページに http://**.ff.jpgという画像を左上に固定、 http://**.ff2.jpgという画像を右下に固定したい場合にはどうやってタグを打ち込めば宜しいのでしょうか？ ご回答の方宜しくお願いします。
- 締切済み
- HTML
- 固定背景画像にリンクをはりたいです。
固定背景画像にリンクをはりたいです。 今、HPの隠しページを作っています。 右下固定の背景画像にリンクをはりたくて 透明の別画像を用意したんですが、 その画像を固定させる方法(HTMLタグ)が分かりません。 ピクセルなどではなく、右下に固定させたいです。
- 締切済み
- HTML
- 画像を左下と右下に固定したいのですが…
HTMLの小技がのっているページ等を見ても自分が調べた限り載っていなかったので質問させていただきます。 背景画像を右下などに固定することはわかったのですがそれでは2つ以上の画像を固定できません…。 自分は右下と左下に固定した画像を表示させたいのですがどうやるかよくわかりません。 どうかご教授よろしくお願い致します。
- ベストアンサー
- HTML
補足
回答有難うございます。 下記のようにしてみたのですが、表示できませんでした。 <html> <head> <title>トップ</title> <style type="text/css"> <!-- #left{ background-image:url("1-corner3.gif"); background-repeat:no-repeat; background-attachment:fixed; background-position:left bottom; height:100%;width:100%; position:absolute; left:0;top:0; } #left top{ background-image:url("1-corner1.gif"); background-repeat:no-repeat; background-attachment:fixed; background-position:left top; height:100%;width:100%; position:absolute; left:0;top:0; } #right{ background-image:url("1-corner4.gif"); background-repeat:no-repeat; background-attachment:fixed; background-position:right bottom; height:100%;width:100%; position:absolute; right:0;top:0; } #right top{ background-image:url("1-corner2.gif"); background-repeat:no-repeat; background-attachment:fixed; background-position:right top; height:100%;width:100%; position:absolute; right:0;top:0; } --></style> </head> <body> <div id="left"></div><div id="right"></div> <div id="left top"></div><div id="right top"></div> </body> </html> スタイルシートのサイトも調べてみたのですがよく分かりません…。 再度申し訳ありませんがよろしくお願いします。