CSSで複数の背景画像を実装する方法

解決済

質問者：orodemwova
質問日時：2011/04/17 11:05
回答数：2件

いまコーディング中なのですが、背景画像がたくさんあるデザインでどうやるか悩んでいます。

添付画像を参照していただきたいのですが、白い背景の下にトップ(赤丸で囲ったオブジェクトが左右に二つあり、グラデーションだけが左右にエンドレスで伸びます。)に固定の背景、センター(青丸で囲った左右のオブジェクトがふたつ)に下方向ににリピートする背景があります。あああああ。。。。となっている部分はフッターで白い背景はフッター部分で切れます。

自分が試した方法です。
html要素に左右に伸びるグラデーションを指定、body要素に赤丸のオブジェクトを指定。これでトップの背景は実装できました。body要素に追加で青丸のオブジェクトも指定してみましたが、画面を上方向にリサイズすると赤丸のオブジェクトの下に重なってしまします。青丸のオブジェクトは白い背景の部分だけでリピートさせ、画面をリサイズしても赤丸オブジェクトに重ならないようにしたいのですが、この場合どのように実装するのが理想でしょうか。よろしくお願いします。

html {
background: #F3F0E1 url(../img/share/bg_line.jpg) center top repeat-x;
}

body {
background: url(../img/share/bg_t.jpg) center top no-repeat,
url(../img/share/bg_m.jpg) center center repeat-y;
}

#wrapper {
margin:0 auto;
width: 960px;
background-color:#FFFFFF;
}

通報する

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

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： sora1tora2
回答日時：2011/05/02 14:23

こんにちは

もう解決しているかもしれませんが、一応。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-16" />
<meta http-equiv="content-Language" content="ja" />
<meta http-equiv="content-style-type" content="text/css" />
<title>ホームページタイトル</title>
<meta name="keywords" content="キーワード1,キーワード2,キーワード3" />
<meta name="discription" content="コンテンツの概要" />
<meta name="author" content="名前" />
<meta name="copyright" content="著作権" />
<style>
*{
margin: 0;
padding: 0;
}
body {
margin:0;
padding:0;
background-image: url(フォルダ/ファイル.jpg) repeat-y top center;
}
#Top-bgimage{
width: 100%;
height: 200px;
background-image: url(フォルダ/ファイル.jpg) no-repeat top center;

}
#wrapper {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position: absolute;
z-index: 1;
top: 0;
}
#content {
margin:0 auto;
padding: 0;
width: 800px;
height: 100%;
background:white;
}
#footer {
width:100%;
height: 100px;
margin: 0;
padding: 0;
background:#000000;
text-align:center;
}
</style>
</head>
<body>
<div id="Top-bgimage"></div>
<div id="wrapper">
<div id="content">コンテンツ</div>
<div id="footer">
<p>footer</p>
</div>
</div>
</body>
</html>

こんな感じです。参考になればいいのですが。

- 0
- 件

通報する

この回答へのお礼

急遽下方向へのリピートは辞めることになり無事納品することができました。
今後同じようなデザインをコーディングする機会がありましたら参考にさせていただきます。

ご丁寧にありがとうございました!!!

通報する

お礼日時：2011/05/08 01:02

No.1

回答者： naokita
回答日時：2011/04/18 15:17

画像の位置の発想を逆にすると・・・

１、グラデ画像と赤円（上画像）を一体化。
２、青円（下画像）を最背景にして、赤円（上画像）を被せる。
３、青円（下画像）は最背景で全面縦リピートするが、
　赤円（上画像）とfooterで隠れて見えなくなるから、
　header画像の真下からfooterの手前までしか伸びていないように見える。
------------------

body { margin:0; padding:0;
background:#E4E4E4 url(下画像.gif) 50% ●px repeat-y;}
#body2 {
background: url(上画像.gif) 50% 0 repeat-x;}
#wrapper {
margin:0 auto; width: 960px; background:white;}
#footer {
background:#E4E4E4 url(上画像.gif) 50% 100%;
width:100%; text-align:center;}

<body>
<div id="body2">
<div id="wrapper">コンテンツ</div>
<div id="footer"><p>footer</p></div>
</div>
</body>