背景画像の固定？

質問

こんにちは。
マイクロソフトのホームページのように
メニューのコンテンツボタンを押すとのジャバスクリプトでホームページの行数（ホームページ自体の上下の長さ）が変化しますが、同時に画像（下の部分が）伸びてページにぴったり収まっています。

これはどのような方法でできるのでしょうか？

恐縮ですが、教えてください。

回答No.3

leap_day · ベストアンサー

すみません
スタイルシート1つ抜けてました（－－；）

<style type="text/css"><!--
body { margin:0px; background-color: #c8e3f1; }
--></style>

回答No.2

leap_day

こんにちは

マイクロソフトの場合、背景画、コンテンツなどのように分けてposition指定によって重ね張りをしています

例えば最背面背景画はこんな感じで・・・

<style type="text/css"><!--
.page_top_bg {
background-image: url(http://i2.microsoft.com/shared/core/1/images/Stage_BG_top.png);
background-repeat:
repeat-x;
padding-top: 10px;
}

.page_bottom_bg {
background-image: url(http://i2.microsoft.com/shared/core/1/images/Stage_BG_btm.png);
background-repeat: repeat-x;
background-position: left bottom;
text-align: center;
position: relative;
}

--></style>

<div class="page_top_bg" style="height:1200px;">
<div class="page_bottom_bg" style="height:1200px;">&nbsp;
</div>
</div>

でコンテンツ選択によってjavascriptでコンテンツ内容を変更したとき(display:none;←→block)にその内容によってheightがそれぞれ変更されていると思います
※内容物が無いと表示されない為style="height:1200px;"を付け加えています

回答No.1

mmcblue

自分なりに質問を解釈したところ、つまりはウィンドウサイズを変更しても画像が隠れない、という事ですね？
それは背景画像を下に固定するようにタグが指令しているからです。
通常上・下・左・右・全体、とどこにでも固定できますが、１箇所にしか固定できません。
まあタグを組み替えれば２つできるはずですが、通常は１箇所なはずです。
私が普段利用しているタグサイト
→http://tuku.spawn.jp/
このサイトのコンテンツにあるcollect→HTML/CSS→menuから背景を選択→一箇所に表示
というページがあるのですが、そこに固定タグがあります。

参考URL：

http://tuku.spawn.jp/