
いまコーディング中なのですが、背景画像がたくさんあるデザインでどうやるか悩んでいます。
添付画像を参照していただきたいのですが、白い背景の下にトップ(赤丸で囲ったオブジェクトが左右に二つあり、グラデーションだけが左右にエンドレスで伸びます。)に固定の背景、センター(青丸で囲った左右のオブジェクトがふたつ)に下方向ににリピートする背景があります。あああああ。。。。となっている部分はフッターで白い背景はフッター部分で切れます。
自分が試した方法です。
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;
}

No.2ベストアンサー
- 回答日時:
こんにちは
もう解決しているかもしれませんが、一応。
<?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>
こんな感じです。参考になればいいのですが。
急遽下方向へのリピートは辞めることになり無事納品することができました。
今後同じようなデザインをコーディングする機会がありましたら参考にさせていただきます。
ご丁寧にありがとうございました!!!
No.1
- 回答日時:
画像の位置の発想を逆にすると・・・
1、グラデ画像と赤円(上画像)を一体化。
2、青円(下画像)を最背景にして、赤円(上画像)を被せる。
3、青円(下画像)は最背景で全面縦リピートするが、
赤円(上画像)と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>
<!--
※ 上画像制作時に色付で適当な高さを確保して保存。
グラデの一体化が無理なら<body>と<div id="body2">の間に
<div id="body1">として、グラデ画像を咬まし、repeat-x。
その場合は、<div id="body2">は、no-repeat。
※ 下画像は最背面で、縦座標の●pxは上画像自体の高さ。
※ footerは上画像の下部を再利用するか、画像無しで統一の背景色だけでもOK。
-->

今回は下方向へのリピートは辞めることにしました。
今後同じようなデザインをコーディングする機会がありましたら参考にさせていただきます。
ありがとうございました!!!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<hr>の縦バージョンはありますか?
-
background-repeat CSS で切れ...
-
画像とその下にあるテキストの...
-
background-sizeの背景で最小値...
-
WEB上でディレクトリ内の画像を...
-
疑似要素で背景画像に指定したS...
-
lightbox2で画像を天地左右中央...
-
同じ画像 複数回使用
-
背景画像が半分しか表示されない
-
画像上に文字を表示するとiPhon...
-
背景が透明な画像をwebサイトに...
-
ロールオーバーで横に並べる方...
-
バナーって何種類作ったら良い?
-
背景画像をブラウザサイズに合...
-
サファリで背景画像が1ピクセ...
-
【至急お助け!】チェックボッ...
-
IMGタグで画像の繰り返し使用は…
-
PDFの保存ボタンが表示されません
-
vscodeにのcssについて質問です...
-
Gifのまわりに白い線ができる
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<hr>の縦バージョンはありますか?
-
【Webサイト】画像が小さく表示...
-
【至急お助け!】チェックボッ...
-
background-repeat CSS で切れ...
-
画像とその下にあるテキストの...
-
background-sizeでcontainする...
-
画像の上にテキスト配置で、拡...
-
同じ画像 複数回使用
-
ページごとに背景画像を変更し...
-
lightbox2で画像を天地左右中央...
-
iframe内をクリックさせない方...
-
IMGタグで画像の繰り返し使用は…
-
WEB上でディレクトリ内の画像を...
-
background-sizeの背景で最小値...
-
画像上に文字を表示するとiPhon...
-
CSSで背景画像をランダムに表示...
-
ワードプレスで事前定義されたc...
-
要素の幅をいろんな写真の幅に...
-
LightBoxの矢印の出し方
-
<ul>タグの上の空白って消せま...
おすすめ情報