- 締切済み
背景固定のタグについて
初めまして。 サイトを作っていて少し分かり辛い点があったので質問させて頂きます。 一つのページに http://**.ff.jpgという画像を左上に固定、 http://**.ff2.jpgという画像を右下に固定したい場合にはどうやってタグを打ち込めば宜しいのでしょうか？ ご回答の方宜しくお願いします。
- みんなの回答 （5）
- 専門家の回答
みんなの回答
度々すみません。すでに3の方の回答で大丈夫かと思いますが、念のため。 インラインフレームを使用する方法もあります。No.1の方の回答＋僕の2の回答を使用し、その中に、 <iframe src="文章を書いたファイル.html" width="50%" height="50%"></iframe> を挿入してください。（widthとheightは適宜大きさの変更を。） 画像の大きさにもよりますが。
すみません、ちょっと失敗して、頓珍漢なことを書いてしまいました・・・。 回答ではないのですが、No.3の方のご回答の、14行目 background: url(b.jpg') no-repeat right bottom fixed; の"url(b.jpg')"で、’が抜けていたので、（正：url('b.jpg')）念のため書かせていただきます。（No.3の方には少々失礼ですが・・・。） この方法は、InternetExplorerでは上手くいったので、なかなか良いと思います。
- goldfox
- ベストアンサー率49% (123/249)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html/40/loose.dtd"> <html> <head> <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <style type="text/css"><!-- html,body{ height:100%;margin:0; overflow:hidden;} body{ background:#ffffff url('a.jpg') no-repeat left top fixed;} div#back2{ width:100%; height:100%; border:1px solid #000000; background: url(b.jpg') no-repeat right bottom fixed; overflow:auto;} --></style> </head> <body> <div id="back2"> 文 </div> </body> </html> ブラウザによっては表示にずれが生じるかもしれませんので、あまりお勧めはできません。
1の方のを転用させていただきました。 background-attachment : fixed;が抜けていたようです。 これを<style>間に上書きすれば、OKです。 <style type="text/css"> <!-- body{ background-image: url(ff.jpg); background-repeat: no-repeat; background-position: left top; background-attachment : fixed; } table{ width:100%; height:100%; background-image: url(ff2.jpg); background-repeat: no-repeat; background-position: right bottom; background-attachment : fixed; } --> </style>
こんなんでどうでしょうか； <html> <head></head> <style type="text/css"><!-- body{ background-image: url(ff.jpg); background-repeat: no-repeat; background-position: left top;} table{ width:100%; height:100%; background-image: url(ff2.jpg); background-repeat: no-repeat; background-position: right bottom;} --></style> <body> <table> <tr> <td> 文 </td> </tr> </table> </body> </html>
お礼
有難う御座います！ しかし、このタグでは背景が固定されず、スクロールバーを動かすと同時に背景も動いてしまうんです… 出来れば背景は固定のままが良いのですが… ご回答有難う御座いました。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_1_thumbnail_img_sm.png)
お礼
回答有難う御座います。 早速試してみた所、左上は固定されたものの、右下は固定されませんでした。 やはり、一つのページに二枚の画像を背景固定させるのは不可能なのでしょうか…