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;
}
投稿日時 - 2010-02-10 21:41:57
間違えました。
<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;
}
投稿日時 - 2010-02-11 12:51:25
お礼
再度のご回答ありがとうございました。
確かに、もう一つの画像を背景に入れることが出来ました。
投稿日時 - 2010-02-11 17:29:44
2人が「このQ&Aが役に立った」と投票しています
ベストアンサー以外の回答（3件中 1～3件目)
<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;
}
投稿日時 - 2010-02-11 09:21:13
お礼
ご回答ありがとうございました。
投稿日時 - 2010-02-11 17:28:20
ページの構成上必ず存在する要素があれば、その要素の背景画像として、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>
参考URL：http://adp.daa.jp/archives/000309.html
投稿日時 - 2010-02-10 23:52:23
お礼
御回答ありがとうございました。
投稿日時 - 2010-02-11 17:27:24
全体を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;}
投稿日時 - 2010-02-10 22:33:01
お礼
ご回答ありがとうございました。
投稿日時 - 2010-02-11 17:26:47
