スプリットカラーの背景（CSSとHTML）

Question

スプリットカラーの背景を持つ方法があるので、私はページの半分を黒色にしました。

通常私は内容が全体bodyの全幅ではありませんので、それらの要素の内容を中心に、ラッパーをページの上部と下部にし、内部の全幅になり<header>と<footer>を持つことになります。

投稿やサイドナビゲーションなどができる実際のコンテンツについては、片側を白、片側を薄い灰色にしてください。

wrapperの中に2つの列を作成して、異なる背景色で左に浮かべることができますが、それでもbackgroundの色はwrapperの両側に表示されます。

私が話していることを誰かが理解してもらえたら、それを説明する方法や何を検索するのか分かりません。

私は、塗料中の迅速な画像を作成し、すぐにこの投稿に添付し、

多くの感謝します！

編集：Example picture

Answer 1

あなたはこの

を試すことお返事のため回の

header, footer{ 
 
    background-color: #ff3399; 
 
    position: relative; 
 
    text-align: center; 
 
    padding: 5px; 
 
} 
 
.container{ 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
.bg{ 
 
    position: absolute; 
 
    top: 0; 
 
    bottom:0; 
 
    height: 3000px; 
 
} 
 
.bgwhite{ 
 
    background-color: white; 
 
    width: 50%; 
 
    left: 0; 
 
} 
 
.bggray{ 
 
    background-color: lightgray; 
 
    width: 50%; 
 
    right: 0; 
 
} 
 
.wrapper{ 
 
    position: relative; 
 
    width: 80%; 
 
    margin: auto; 
 
} 
 
p{ 
 
    margin: 0; 
 
    padding: 10px; 
 
}

<header>This is header</header> 
 
<div class="container"> 
 
    <div class="bg bgwhite"></div> 
 
    <div class="bg bggray"></div> 
 
    <div class="wrapper"> 
 
    <p>This is website content. This is website content. This is website content. This is website content. This is website content. This is website content. This is website content. This is website content. This is website content. This is website content. This is website content. This is website content. This is website content. This is website content. This is website content.</p> 
 
    </div> 
 
<footer>This is footer</footer>

Answer 2

これはあなたが何ができるかです：

HTML

<div id="content"></div> 
<div id="background"></div> 

CSS

#background { 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    width: 50%; 
    height: 100%; 
    background-color: pink; 
    z-index: 1; 
} 

#content { 
    position: relative; 
    z-index: 2; 
}