Problem mit CSS Hintergund-Farbverlauf im Body

Druckbare Version

27.12.2012, 12:40
illplanet

Problem mit CSS Hintergund-Farbverlauf im Body

Ich habe den Hintergund des Body mittles CSS-Farbverlauf im Contao-Backend gestaltet. Jetzt ist mir aufgefallen, dass der Farbverlauf wiederholt wird, sobald der Wrapper eine Höhe von 800px unterschreitet. Ist mir auf meinem 15" Notebook gar nicht aufgefallen. Interessant ist, dass dies nur auftritt, wenn der Bildschirm groß genug ist und der Inhalt des Wrappers, keine Höhe von 800px erreicht. Sobald mehr Inhalt auf der Seite dargestellt wird und ich scrollen muss, wird auch der Farbverlauf im Hintergrund (im Body) perfekt dargestellt und an die erforderliche Höhe angepasst. Kann mir da jemand weiterhelfen?
Ich hatte eigentlich erwartet, dass der Body das gesamte Browserfenster ausfüllt.
27.12.2012, 12:54
stefan-at-work

Link wäre hilfreich...
27.12.2012, 13:04
illplanet

Hier der Link:

Problem gelöst, daher habe ich den Link entfernt. EDIT: Problem besteht im IE9 leider weiterhin
27.12.2012, 13:33
tblumrich

Hallo.

Probier mal <html> 100% height oder vielleicht auch min-height zu geben.

Gruß
Thomas
27.12.2012, 13:33
thomas.japan

Setz den Farbverlauf mal auf html.

Code:

html { background: linear-gradient(45deg, #F2F2F2, #0B0B0B); }

Gruß
Thomas
27.12.2012, 13:35
willshedo

Hi illplanet,

ja, das Phänomen kenne ich. Ich packe da immer ein background-attachment: fixed; dahinter, dann passt das.

Grüße,
CHris
27.12.2012, 13:44
illplanet

Zitat:

Zitat von tblumrich

Hallo.

Probier mal <html> 100% height oder vielleicht auch min-height zu geben.

Gruß
Thomas

Super, vielen Dank - das war's. Hatte height 100% schon als CSS Anweisung für den Body ausprobiert, allerdings ohne Erfolg , so läuft's.
27.12.2012, 13:46
illplanet

Zitat:

Zitat von willshedo

Hi illplanet,

ja, das Phänomen kenne ich. Ich packe da immer ein background-attachment: fixed; dahinter, dann passt das.

Grüße,
CHris

Der Farbverlauf ist hier aber keine Grafik, sondern mittles CSS erzeugt.
27.12.2012, 13:50
illplanet

Zitat:

Zitat von thomas.japan

Setz den Farbverlauf mal auf html.

Code:

html { background: linear-gradient(45deg, #F2F2F2, #0B0B0B); }

Gruß
Thomas

Danke, aber das hat leider nicht funktioniert.
27.12.2012, 13:58
thomas.japan

Zitat:

Zitat von illplanet

Danke, aber das hat leider nicht funktioniert.

Ja, habe ich dann auch gemerkt. Hatte schon zuviel mit Firebug "gespielt" und dann war die Lösung schon da.

Gruß
Thomas
28.12.2012, 16:29
illplanet

Ich muss diesen Thread doch noch einmal starten. Zwar hat der Lösungsansatz über die CSS-Anweisung

Code:

html {min-height: 100%;}

im Firefox und Chrome einwandfrei funktioniert, allerdings läuft es nicht im IE :( Auch

Code:

html {height: 100%;}

liefert nicht das gewünschte Ergebnis. Überhaupt scheint der IE 9 conditional comments zu ignorieren - kann das sein?
28.12.2012, 21:03
tblumrich

Na dann gib uns doch mal den Link zurück... ;)
28.12.2012, 21:55
illplanet

Okay, hier noch einmal der Link: http://www./

Wie gesagt, im FF und Chrome ist alles in Ordnung, nur eben nicht im IE.
29.12.2012, 01:04
plastiko

Ich kann da kein conditional comment für css sehen. Hast du es im Seitenlayout eingebunden?

Ansonsten lasse das mit dem min-height für html.
Drücke besser #wrapper auf die mindesthöhe von 100%:

Code:

html, body { height: 100%; } #wrapper { min-height: 100%; }

Den Verlauf kannst du im body belassen.
29.12.2012, 09:43
illplanet

Zitat:

Zitat von plastiko

Ich kann da kein conditional comment für css sehen. Hast du es im Seitenlayout eingebunden?

Ansonsten lasse das mit dem min-height für html.
Drücke besser #wrapper auf die mindesthöhe von 100%:

Code:

html, body { height: 100%; } #wrapper { min-height: 100%; }

Den Verlauf kannst du im body belassen.

Das sah im ersten Moment gut aus, nur sobald ich eine Seite mit viel Inhalt aufrufe und scrollen muss, wiederholt der IE den Farbverlauf erneut. Es scheint, als könne er das einfach nicht umsetzen. Nun gut, ist ja in erster Linie ne optische Spielerei, bleib ich eben bei nem einfarbigen Hintergrund.

Den conditional comment hatte ich wieder entfernt. Ich wollte das Farbverlaufsproblem im IE damit umgehen, dass ich für den ihn einfach nen einfarbigen Hintergrund definiere aber er ignoriert die Anweisung.

Trotzdem vielen Dank für Eure Ideen.
29.12.2012, 12:14
stefan-at-work

IE-9 und IE-8 brauchen einen Filter. Kuckst Du hier
29.12.2012, 12:15
magicsepp

Stefan,

Leo hat dafür css3pie eingebaut das gradiants können sollte.

LG
29.12.2012, 12:36
stefan-at-work

Zitat:

Zitat von magicsepp

Leo hat dafür css3pie eingebaut das gradiants können sollte.

stimmt, da hast Du Recht. Wobei sowohl die von mir benannten Filter als auch CSS3PIE nur horizontale und vertikale Verläufe in den alten IE-Versionen unterstützen. 45°-Verläufe sind auch damit (in alten IE-Versionen) nicht möglich.
29.12.2012, 12:50
magicsepp

wobei ein 45° in den Beispielen enthalten ist (Steps), nur die Farben passen dann nicht mehr so ganz, was aber hier sowieso nicht gebraucht wird. http://css3pie.com/demos/gradient-patterns/
22.01.2013, 13:17
Zwergenmeister

Hatte das Problem auch mit 3.0.3, der Verlauf war im IE9 immer nach dem Footer zu Ende.

Lösung für IE9 statt body dem html den Verlauf zuordnen.

Hatte zu folge das der IE9 jetzt funktioniert nur Ch und FF nicht :-)

background-attachment:fixed;

hinzugefügt, jetzt geht es auch im Ch und FF.

Ohne height etc.

VG
Zwergenmeister