Split Farbe Hintergrund (CSS & HTML)

Question

Gibt es eine Möglichkeit für mich, einen geteilten Farbe Hintergrund zu haben, so habe ich die Hälfte der Seite schwarz, rechts die Hälfte weiß.

Normalerweise habe ich die <header> und <footer>, die oben und unten auf der Seite in voller Breite sein und nach innen, um ein Wrapper, den Inhalt dieser Elemente zu zentrieren, so dass der Inhalt nicht volle Breite der gesamten body ist.

Wenn es nun um den eigentlichen Inhalt geht, wo Posts und Seitennavigation usw. sein könnten, möchte ich, dass eine Seite weiß und die andere Seite hellgrau ist.

Ich weiß, dass ich zwei Spalten erstellen kann innerhalb einer zentrierten wrapper mit verschiedenen Hintergrundfarben links schwebte, aber das würde immer noch verläßt die background Farbe zeigt, die auf beiden Seiten der wrapper.

Ich hoffe jemand versteht, wovon ich rede, ich habe keine Ahnung, wie ich es erklären soll oder was ich suchen soll.

werde ich schnell ein Bild in Farbe machen und bald

vielen Dank an diesem Beitrag anhängen!

Edit:Example picture

Answer 1

können Sie versuchen, diese

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

Dies ist, was Sie tun können:

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; 
}