- ベストアンサー
背景に複数の画像を入れることは可能でしょうか
HTML、CSSの初心者の者です。 下記のように、CSSで背景に画像back1.gifを右上に入れているのですが、画面の右下にもう一つの画像back2.gifを入れることは可能でしょうか？ もし可能なら、方法を教えて下さい。 初心者向けに易しくご説明頂けると幸いです。 body { background-color:yellow; background-image:url(image/back1.gif); background-attachment:fixed; background-repeat:no-repeat; background-position:right top; }
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
間違えました。 <body>を透明にしないと、<html>の背景画像は隠れてしまいます。 未検証です。 html { background-color: yellow; background-image:url(image/back1.gif); background-attachment:fixed; background-repeat:no-repeat; background-position:right top; } body { /* background-color :transparent; *//* 無指定かtransparentを指定 */ background-image:url(image/back2.gif); background-attachment:fixed; background-repeat:no-repeat; background-position:right bottom; }
その他の回答 (3)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
<html>タグにも背景を指定できます。 html { background-image:url(image/back1.gif); background-attachment:fixed; background-repeat:no-repeat; background-position:right top; } body { background-color :yellow; background-image:url(image/back2.gif); background-attachment:fixed; background-repeat:no-repeat; background-position:right bottom; }
お礼
ご回答ありがとうございました。
ページの構成上必ず存在する要素があれば、その要素の背景画像として、2枚目、3枚目の背景画像を指定することができます。具体的にどうするのかはページの構成依存するので、ここで示すことはできませんが、参考URLでは一例が解説されています。(1)から(5)まで段階的に説明されているので、参考になると思います。 「背景画像のためだけに」div要素等を入れるのであれば、img要素を入れるほうが意味的にははっきりするように思います。こんな方法もある、ということで。 --- <html> <head> <title>test</title> <style type="text/css"> #background0 { position: absolute; bottom: 0; right: 0; } </style> </head> <body> <img id="background0" src="image.png" alt="background image"/> </body> </html>
お礼
御回答ありがとうございました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
全体をdivで囲む。 <body> <div> ・・・・・・・・・・ </div> <body> CSS body{background:yellow url(image/back1.gif) fixed no-repeat right top;} body>div{height:100%;background:yellow url(image/back2.gif) fixed no-repeat right bottom;}
お礼
ご回答ありがとうございました。
お礼
再度のご回答ありがとうございました。 確かに、もう一つの画像を背景に入れることが出来ました。