CSSの2つの部分のバックグラウンドを配置する最も良い方法は？

Question

私は奇妙な背景を持っています。私はそれをスタイルする最も良い方法を見つけようとしています。

このように、背景画像には2つの部分があります。上部はユニークな水平と垂直のデザイン（約1024x700）を持ち、下部のセクションは水平にユニークなスタイルを持ちますが、垂直に繰り返すことができます。 （1024 x 1）

今はヘッダーの背景イメージが上部に表示されていますが、問題は、ページの内容をすべてスタイリングするためにねじれてしまうことです。

HTMLとCSSのような2ピースの背景をどのようにコードするのが最適でしょうか？

ページがそうのようにレイアウトされている： - > divのヘッダー

-

のdivコンテナ

> divのコンテンツ

のdivフッター

私は確かにかかわらず、それを変更することができます。 ..

ありがとう！

ケビン

Answer 1

、これは解決策になることがあります。一番下のセクションのための

1. 、単にあなたの1ピクセルの画像の繰り返し-Xでそれを行うには、トップのためのボディの背景

2. に適用しましたセクションでは、あなたのメインコンテナdivはこれでスタイルされています：

幅：100％; 背景：url（ 'your-image.jpg'）center;

メモ：テストされていません

Answer 2

positioningとz-indexをいじります。私はあなたによく理解している場合

Answer 3

まあ、フッターでの停止は難しい部分です。通常このタイプのものは、次のようなことをします：

html {background: SOMECOLOR url(path/to/y/repeater.jpg) repeat-y scroll top center;} 
body {background: transparent url(path/to/static.jpg) no-repeat scroll top center;}