CSS Background-Color abschnitte festlegen

finkin · 22. August 2018

Guten Abend,

ich versuche seit einem Tag das Layout so hinzubekommen, das der ganze body eine farbe hat (dunkel grau) und wenn ich runter scrolle auf das nächte bild soll sich die farbe in weiß ändern. Nur wenn ich dem Body die hintergrundfarbe #2E2E2E (dunkel Grau) gebe und dann bei einem anderen Bereich die Hintergrundfarbe änderte, erstreckte sich diese nicht über den ganzen body. Gibt es eine Möglichkeit im Body oder im gewünschten Bereich den Hintergrund so zu definieren, wie ich es beschrieben hab?

ich komm einfach nicht darauf wie man folgendes layout hinbekommt:[Blockierte Grafik: http://fs5.directupload.net/images/180822/v9fltlms.png]

basti1012 · 22. August 2018

Das könnten mehrere Container sein,oder css

https://www.mediaevent.de/css/gradient.html

Fals ich dich jetzt richtig verstanden habe

finkin · 23. August 2018

https://davisfrank.wixsite.com/monastir

das will ich haben, man sieht beim scrollen das sich der der hintergrund unten ändert ohne verlauf. Ich habe einen Contrainer für den Bereich den ich weiß haben will erstellt, aber dieser erstreckt sich nun wenn ich die "background-color:white;" setze nicht über die ganze body-breite sondern nur über den Text... mit den properties "left: 0px" usw. hat das verrücken des hintergrunds nicht funktioniert. Ich probiers jetzt weiter uns hoffe ich komme drauf. Danke für die Antwort

Beste Grüße

finkin · 23. August 2018

hier bin ein schritt damit weiter gekommen:

body

{

width: 100%;

background: linear-gradient(180deg,#2E2E2E 50%, white 50%);

}

teilt den hintergrund in schwarz und weiß, nun soll er aber unter wieder schwarz werden.

basti1012 · 23. August 2018

Zitat von finkin

teilt den hintergrund in schwarz und weiß, nun soll er aber unter wieder schwarz werden.

kuck mal ob du das so ungefähr meinst

Code

body{
  height:1200px;
background: linear-gradient(to bottom,black 33% ,white 33%, white 66%, black 66%);
background-repeat: no-repeat;
}

finkin · 23. August 2018

ja genau, das sieht schonmal gut aus, vielen dank für die Zeit

nur der einzige unterschied ist das sich die farbe schlagartig ändern soll und keinen überlauf haben soll wie auf der folgenden webseite::

https://davisfrank.wixsite.com/monastir

weiter will ich dann auch ein bild wie auf dieser webseite genauso positionieren.

Liebe Grüße

Davis - finkin

basti1012 · 23. August 2018

Zitat von finkin

nur der einzige unterschied ist das sich die farbe schlagartig ändern soll und keinen überlauf haben soll

In meinen Beispiel ändert sich die Farbe doch schlagartig und hat keinen überlauf zur anderen Farbe. Das verstehe ich gerade nicht.

Das mit den Bild wirst du wohl anders regeln müssen ( Mit Containers zb ) , weil radial gradient und noch ein Bild dazu geht wohl nicht. Vieleicht geht es doch ,aber ich kenne gerade keinen weg wie man beides hinbekommt. Ich werde es zwar mal versuchen aber das wirst du wohl mit extra Containers Regeln müßen.

Edit:

Wenn es unbedingt in einen Container bleiben muß( oder wie hier body ) ,könntest du am Anfang oder auch am Ende mit :before und :after ein Bild setzten.

Code

body{
    margin:0;
    padding:0;
    height:450px;
    background: linear-gradient(to bottom,transparent 25%,black 25%, black 50%, white 50%,white 75%,black 75%);
    background-repeat: no-repeat;
}
body:before{
    content:'';
    background-image:url(http://sebastian1012.bplaced.net/bilder/homer.jpeg);
    height:112.5px;
    width:100%;
    display:inline-block;
    background-size:100% 100%;
    background-repeat: no-repeat;
}

Alles anzeigen

Nur irgendwie ist das eine schlechte Lösung. Mit extra Container wird das wohl einfacher werden

CSS Background-Color abschnitte festlegen

Jetzt mitmachen!

Teilen

Tags