CSSテクニックコミュの質問：ボックス内に背景を配置するには？

失礼します。ごく、初歩的な質問だと思うのですが…。
以下のソースで表示すると、背景がボックス内の右上ではなく、ウィンドウの右上に配置されてしまいます。
これをボックスの右上に表示させるには、どうしたらいいでしょうか？
ご教授お願いします。
以下、ソースです。必要と思われる部分だけの抜き出しなので、不足分があれば、すみません。

-------HTML
<body>
<h1>タイトル</h1>

<div id="wrap">

</div>
</body>

--------CSS
#wrap {width:100%;
height:auto;
margin:0;
padding:0;
background-image:url("flower.gif");
background-attachment:fixed;
background-repeat:no-repeat;
background-position:right top; }

コメント(6)

最初
全て
最新の40件

[1] mixiユーザー 02月01日 19:20

右上に見えてますよ。
他になにか、省略したcssなりあるのでは？
#wrapに

border:1px solid red;

とか入れて、本当に自分の考えている位置にあるか、見てみては。

[2] mixiユーザー 02月01日 19:26

コピー検証用ソース
----------
<html>
<head>
<body>
<style type="text/css">

</style>
</head>
<h1>タイトル</h1>
<div id="wrap"></div>
</body>
</html>
-----------

特に問題なく表示されます。

あえて言うならば、
height:autoはデフォルト値なので指定する意味は無いかもしれません。

[3] mixiユーザー 02月01日 20:32

mioさん、ゆぇさん、ご回答、ありがとうございます。
もう一度表示確認してみたところ、きちんと表示されました。
お手数おかけして、すみませんでした。

でも、IEで確認すると、きちんと画像が丸々出てくるのですが、Fire Foxで確認すると、やっぱりウィンドウ全体の右上に配置され、画像とボックスの重なっている部分だけが表示されてしまいます。
これは、どうやって解決すればいいのでしょうか？

引き続き、よろしくお願いいたします。

[4] mixiユーザー 02月01日 21:05

background-attachment:fixed;
を除いてみたらどうでしょう。

[5] mixiユーザー 02月01日 21:27

ゆえさん、二度目のご回答、ありがとうございます！
どちらのブラウザでも、きちんと配置されました。

CSSで画像を配置するとき、ほぼbodyに、ということが多かったので、意味を理解せずにそのまま習性でぽんとタグを置いてました(^_^;)
これからはもうちょっと気をつけて、タグを書こうと思います。
本当にありがとうございました。

ログインすると、みんなのコメントがもっと見れるよ