Mit HTML mehrfarbiger Hintergrund erstellen bzw. bewegender Hintergrund?

Hallo,

ich möchte mir eine Webseite mit HTML erstellen.

Jetzt möchte ich aber als Hintergrundfarbe mehrere Farben verwenden geht das?

Gruß

polizei1100

Answer 1

[4Andi]

Du könntest einfach ein Bild mit mehreren Farben verwenden und das als Hintergrund einstellen. Das Bild kannst du auch selber in Paint zeichnen, wenn du möchtest.

Comments

[Polizei1100]

Danke :)

Answer 2

[tavkomann]

Es existieren mehrere Möglichkeiten dafür.

CSS Gradients

Du kannst Farbverläufe nutzen, um mehrere Hintergrundfarben zu bewirken:

background: linear-gradient(richtung, farbe1, farbe1 x%, farbe2 x%, farbe2 y%, farbe3 y%, farbe3);

Der Anteil der Farbe wird prozentual angegeben. Live-Beispiel: https://jsfiddle.net/jtgmem0a/

Mehrere Container

Die Struktur kann z.B. so aussehen:

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

Dann setzt du für alle Container dieselbe Breite und Höhe:

#background div {
  width: 100vw;
  height: 33.333vh;
}

Und gibst ihnen eine Farbe:

#background div:nth-child(1) {
  background-color: farbe1;
}
#background div:nth-child(2) {
  background-color: farbe2;
}
#background div:nth-child(3) {
  background-color: farbe3;
}

Live-Beispiel: https://jsfiddle.net/3nx0ngwj/

Der scheinbare Vorteil dieser Variante ist, dass sie auch im IE9 funktioniert, falls du diesen unterstützen möchtest. Allerdings ist es in diesem Fall wesentlich empfehlenswerter, für den IE als Fallback mithilfe von background-color eine einfache Hintergrundfarbe einzurichten, damit die Menge an Code und somit auch die Ladezeit deiner Seite nicht aufgrund eines alten Browsers leidet.

Hintergrundbild

Diese Variante ist hier schon angesprochen worden. Allerdings bedeuten Bilder immer einen extra Request und kosten somit zum Einen Ladezeit zum Anderen Datenvolumen. Außerdem ist es für dich als Entwickler ein größerer Aufwand als nur eine Zeile zu notieren. Deswegen ist dies in der heutigen Zeit definitiv die schlechteste Methode.

Answer 3

[VariousArtist]

Wenn, dann müsstest du das in einem anderen Programm selber erstellen und als .png, oder .jpg, usw einfügen

Comments

[Polizei1100]

Okay danke

Answer 4

[uniqueusername7]

Es gibt mehrere Möglichkeiten: -wie erwähnt könntest du ein Hintergrundbild nutzen. Du könntest auch einen Verlauf benutzen, css bietet dafür "gradient". Syntax ist: background: linear-gradient (Richtung, Farbe1, Farbe2, ...). Richtung ist optional. Du könntest auch mehrere divs erstellen, diese so anordnen, wie du die Farben verteilen willst, und den divs eine background-color geben.

Answer 5

[PhotonX]

Wie soll denn das aussehen? An manchen Stellen eine Farbe und an anderen eine andere? Oder eine Farbe, die sich mit der Zeit ändert?