- 締切済み
背景の2重指定 タグ
はじめまして。 背景のタグについて悩んでいまして、 一つは左上に、右下が隙間があるので、もう一つは右下に固定したいのですが、そのような事はできるでしょうか？ 今は左上だけできるのですが、右下に固定のやり方がどうしてもわかりません；； このような感じです↓ <style type="text/css"> <!-- body { background-color: #ffffff; background-image: url(http://db1.voiceblog.jp/data/bokunikudasai/1222662705.jpg); background-repeat: no-repeat; background-attachment: fixed; } --> </style> <STYLE type="text/css"> ここからできるでしょうか？ わかりにくい質問で申し訳ないのですが、教えてくださったら嬉しいです。
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
ひとつのHTMLに２枚の背景画像 右上に空と雲、左下に山と森を配置する方法です。IE/firefoxその他・ユーザーエージェントに依存しません。 ≫試してみたのですが、Unicode?がなんたらかんたらと出てきて無理でした；； この「教えて」システムの問題で、文字がunicodeで送られるためにそうなります。 すべて手で打ち直したほうが良いです。 分かりやすいように全角スペースでインデントさせていますので、それもタブに変換すること。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>CSS-背景画像を二つ表示-</title> <style type="text/css"> <!-- body{ margin: 0px;} div div{border: solid transparent 1px;} body div.left_top{ padding:0px; position: relative; background: rgb( 200,255,255) url(http://db1.voiceblog.jp/data/bokunikudasai/1222662705.jpg) no-repeat; height: 100%; } body div.left_top div { background: url(http://db1.voiceblog.jp/data/bokunikudasai/1222662705.jpg) 100% 100% no-repeat; width:100%; height:100%; } --> </style> </head> <body> <div class="left_top"> <div> <p>テストだよ</p> </div> </div> </body> </html>
＞具体的にはどのようにすれば 質問内容にあるソースはbodyに対して背景画像が指定されているので、同じようにhtmlに対して同じようにもう一つの画像を指定するだけです。 画像が違いますが html { background-color: #ffffff; background-image: url(http://db1.voiceblog.jp/data/bokunikudasai/1222662705.jpg); background-repeat: no-repeat; background-attachment: fixed; } のように。 左上、右下への配置はbackground-positionでできますよ。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
簡単に汎用ブロックを重ねて背景を指定するだけですが??? <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>CSS-背景画像を二つ表示-</title> <style type="text/css"> <!-- body{ margin: 0px;} div div{border: solid red 1px;} body div.left_top{ padding:0px; position: relative; background: rgb( 200,255,255) url("http://db1.voiceblog.jp/data/bokunikudasai/1222662705.jpg") no-repeat; height: 100%; } body div.left_top div { background: url("http://db1.voiceblog.jp/data/bokunikudasai/1222662705.jpg") 100% 100% no-repeat; width:100%; height:100%; } --> </style> </head> <body> <div class="left_top"> <div> <p>テストだよ</p> </div> </div> </body> </html>
お礼
ご回答ありがとうございます！ 試してみたのですが、Unicode?がなんたらかんたらと出てきて無理でした；； 俺の試し方が悪いと思うのですが…。 せっかくお答えしてもらったのにすみません；；
htmlに対してもう一つの画像を指定すればほとんどのブラウザでは表示してくれるのではないでしょうか。 IEがちょっと怪しいかもしれませんが。
お礼
具体的にはどのようにすればいいのでしょうか？ すみません、初心者なものでよくわからなくて；；
- torayoshi
- ベストアンサー率62% (910/1449)
これで一応可能なんだけど、致命的な欠点はIE専用でFirefox不可ってとこ。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>CSS-背景画像を二つ表示-</title> <style type="text/css"> * { padding: 0; margin: 0; } .left_top { background-image:url(http://db1.voiceblog.jp/data/bokunikudasai/1222662705.jpg); background-repeat: no-repeat; width: 50%; position: absolute; left: 0px; height: 100%; } body { background-image:url(http://db1.voiceblog.jp/data/bokunikudasai/1222662705.jpg); background-repeat: no-repeat; background-position:100% 100%; } </style> </head> <body> <div class="left_top"> </div> </body> </html>
お礼
回答ありがとうございます！ ただやはりFirefoxでも見れるようにしたいので…。 本当に申し訳ありません。
お礼
試してみましたｗ 美味く行きそうだったのですが、元々あった左上の背景が中央の方にずれてしまったり、右下に貼り付けたい背景が左上にあったままで、しかも左上の元々の背景に隠れてしまったりと；； すみません…今はこんな感じです↓ <style type="text/css"> <!-- body { color: #b0c4de; /*文字色*/ margin: 30px 50px 20px 10px; scrollbar-base-color: #ffffff; scrollbar-shadow-color: #cccccc; scrollbar-darkshadow-color: #ffffff; background: #ffffff url(左上の背景) no-repeat fixed; /*背景画像*/ font-size: 85%; } A:link, A:visited, A:active { color: #9eb7c5; text-decoration: none; /*リンク文字色*/ } A:hover {color:#c8e8ff;} .text1 { margin-left: 45%; line-height: 150%; } html { background-color: #ffffff; background-image: url(右下の背景); background-position: right bottom; background-repeat: no-repeat; background-attachment: fixed; } --> </style> 初心者なので間違いが多いと思いますが、どうすれば直りますかね；； 教えてくださるとうれしいです＞＜