ｈｔｍｌ・cssによる背景の2重設定

締切済

質問者：html-john
質問日時：2006/08/31 04:35
回答数：4件

HP制作をしているのですが…
少々デザインを凝ってみようかなー、と考え、
背景の2重設定を思いついたのですが、どうしても表現できないのです。
私が言う背景の2重設定とは…

背景Aと背景Bがあり、背景Aは固定されているのですが、背景Bは画面中央に表示される－というものです。
画面をスクロールをしても背景Bは常に画面中央に表示されていて背景Aの上に背景Bは存在する－という形になっております。

私が試したhtml・cssを以下に記載したいとおもいます。

<html>
<head>
<title></title>
<style type="text/css">
body{
background-image: url(B.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
}
</style>
</head>
<body background="sozai/haikei/A.gif">
<table width="100%" height="1500" border="0" cellpadding="0" cellspacing="0">
<tr><td>

</td></tr></table>
</body>
</html>

－とこのような形になっております。
背景Aを透過gifを用いて背景Bを表示させようと試みたのですが、画面全体に透過gifを用いるとスクロール時に読み込みに時間がかかって…大変ユーザーに見にくくなってしまいました。

質問の回答の程、どうかよろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.4

回答者： picto3
回答日時：2007/08/04 09:42

質問に記述してあったHTMLを元に書き換えてみました。

HTML準拠の記述に関しては、前の人の回答を参考にして下さい。

<html>
<head>
<title></title>
<style type="text/css">
body{background: url(sozai/haikei/A.gif) 50% 50% no-repeat fixed;}
#bk_B{
position:absolute;
top:50%;
left:50%;
width:300px;
height:300px;
background:url(B.jpg) 50% 50% no-repeat;
margin-top:-150px;
margin-left:-150px;}
</style>
</head>
<body>
　<div id="bk_B">
　　<p>テキストサンプル</p>
　</div>
</body>
</html>

絶対配置を使って配置させました。

各プロパティの数値に関しては
「B.jpg」の画像のサイズが分からなかったので
縦横両方とも300pxの画像でテストしたものです。

画像のサイズは
　width:300px;
　height:300px;
で指定します。「300px」をご自分の画像のサイズに置き換えて下さい。

また、「margin-top」と「margin-left」で
画像が常に画面中央に表示されるように設定してあります。

　margin-top:-150px;
　　（画像の縦幅を２で割った数値をマイナス値に）
　margin-left:-150px;
　　（画像の横幅を２で割った数値をマイナス値に）

このような感じでいかがでしょうか？
解決するとよいのですが…

- 0
- 件

通報する

No.3

回答者： awasumi
回答日時：2006/08/31 16:31

補足ありがとうございます。

高さを1500pxで指定した場合、背景は下に行ってしまって
ウィンドウの中央には常に表示されないですよね・・。

やりたい感じとしてはこんな感じ↓でしょうか？。
http://harmony.blog5.fc2.com/h/harmony/file/cent …

一度、このサイト↑とNo.2のCSSを参考にして
試行錯誤していただいてもよろしいでしょうか？

すみません、明日の昼頃まで時間このサイトを見れなくなりそうなので...○rz

参考URL：http://harmony.blog5.fc2.com/blog-entry-87.html

- 0
- 件

通報する

No.2

回答者： awasumi
回答日時：2006/08/31 13:12

No.1の回答で背景Aと背景Bを間違って書いてしまいました。

すみません...○rz

tableの高さが1500でなくてもよいのであれば出来ます。
高さを100％にします。

一つの要素（この場合body）に指定できる背景画像は、ひとつです。
なのでスタイルシートで以下のように記述します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<style type="text/css">

</style>
<title></title>
</head>
<body>
<div id="test">
<p>テストだよ</p>
</div>
</body>
</html>

ただし、DOCTYPE宣言が標準準拠モードの場合のみ有効な手段ですのでDOCTYPE宣言を以下のように↓
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">（別窓）

詳しくは参考URLを参考にしてください。

＃<body background="">はHTML4.01では非推奨とされています。スタイルシートで指定することをお勧めします。

参考URL：http://www.stylish-style.com/csstec/hi-level/dou …

- 0
- 件

通報する

No.1

回答者： awasumi
回答日時：2006/08/31 12:54

補足要求です。

tableの高さが1500になっていますが、
1500を基準とした中央ではなく、ウィンドウの中央に
背景Aを表示させるようにしたいということでしょうか？

スクロールすると、スクロールに合わせて背景Aが動いて
ウィンドウの中央にこさせたいということですか？

この回答への補足

ご丁寧な回答どうもありがとうございます！
大変分かりやすい解説でした。
htmlを記載してくれ、更に注意点も述べていただけるとは－感謝の極みです。
<body background="">は知らなかったので修正しようとおもいます。
参考URLも大変参考になりました。
これで背景の2重設定ができる…っ！

補足としましては、
tableの高さを1500に指定したのは特に意味はありません。
スクロールをした時のテスト用の為、画面より大きめにサイズを指定しただけです。
仰る通り、スクロールにあわせてウィンドウの中央に画像が表示される、という形です。
背景Aが動く…というよりも、

・背景Aはブラウザ上は動かない。
・背景Bが画面中央に位置しており、スクロールをして　も背景Bは画面の中央から動かない
・背景Aの上に背景Bが表示される

－という形を希望しております。