HTML/CSS Design für 100% Breite horizontalen Farbverlaufs-Effekt

Question

Ich versuche, den Effekt eines horizontalen Farbverlaufs zu erreichen, der sich über die gesamte Breite des Browsers erstreckt. Momentan besteht meine Idee darin, drei Segmente zu haben, eins auf der linken Seite, dessen Hintergrundfarbe mit CSS auf die erste Farbe eingestellt ist. Diesem würde der tatsächliche Verlauf folgen, der ein Bild ist, das mit CSS wieder zum Hintergrund des Bildes wird. Dies wäre 1000px breit und würde als Inhaltsbereich dienen und ist auf der Seite mit magin: auto zentriert. Dann rechts davon befindet sich das dritte Segment, das im Wesentlichen gleich dem ersten ist, nur mit der 2. Farbe als Hintergrund. Auf diese Weise würden sich die linken und rechten Segmente dehnen, während die mittlere (die den Gradient enthält) gleich bleibt.

Diese Theorie wird grafisch dargestellt here.

Mein Problem ist in Bezug auf die beiden Seitenbereiche. Wie erwähnt, ist das zentrale Bild ein fixes 1000px, aber wie kann ich die linken und rechten Bereiche haben, um eine Fluidbreite (feste Höhe) zu haben, aber nur so, dass die linke Seite von der linken Seite des Browsers zum zentralen div ist die rechte von der rechten Seite der div auf der rechten Seite des Browsers?

Ich hoffe, ich habe das Problem klar genug erklärt, wenn nicht bitte sagen, und ich werde versuchen, weitere Informationen zu liefern.

Prost

Answer 1

Gleiche Frage, und ich gab die Antwort auf Positioning an images outside of the layout

Siehe unten stehende Geige für die Ausgabe ...

Fiddle : http://jsfiddle.net/C2j6G/4/

Demo: http://jsfiddle.net/C2j6G/4/embedded/result/

Aktualisiert Geige nach user908041 Anforderung

Fiddle: http://jsfiddle.net/C2j6G/5/

Demo: http://jsfiddle.net/C2j6G/5/embedded/result/

Answer 2

Here a fiddle for you. Ich hoffe es hilft.

Sie müssen nur Ihren Farbverlauf in einen Container legen. Dann können Sie die Spalten im Inneren einrichten.

EDIT:

Hier wird die Bearbeitung für 100% Breite: http://jsfiddle.net/2MEhA/2/