Contao-Camp 2024
Ergebnis 1 bis 20 von 20

Thema: Problem mit CSS Hintergund-Farbverlauf im Body

  1. #1
    Contao-Nutzer
    Registriert seit
    10.11.2012.
    Beiträge
    62

    Standard 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.

  2. #2
    Community-Moderator Avatar von stefan-at-work
    Registriert seit
    05.06.2009.
    Ort
    Bad Segeberg
    Beiträge
    1.780
    Partner-ID
    634

    Standard

    Link wäre hilfreich...

  3. #3
    Contao-Nutzer
    Registriert seit
    10.11.2012.
    Beiträge
    62

    Standard

    Hier der Link:

    Problem gelöst, daher habe ich den Link entfernt.
    EDIT: Problem besteht im IE9 leider weiterhin
    Geändert von illplanet (28.12.2012 um 18:53 Uhr)

  4. #4
    Contao-Urgestein Avatar von tblumrich
    Registriert seit
    25.06.2009.
    Ort
    Feldberger Seenlandschaft
    Beiträge
    2.224
    Partner-ID
    7979
    User beschenken
    Wunschliste

    Standard

    Hallo.

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

    Gruß
    Thomas
    blucomp | Webdesign & Onlinelösungen

  5. #5
    Contao-Nutzer
    Registriert seit
    09.11.2009.
    Beiträge
    82

    Standard

    Setz den Farbverlauf mal auf html.
    Code:
    html {
      background: linear-gradient(45deg, #F2F2F2, #0B0B0B);
    }
    Gruß
    Thomas
    クリエイター

  6. #6
    Gesperrt
    Registriert seit
    23.06.2009.
    Ort
    Rheinfelden
    Beiträge
    322

    Standard

    Hi illplanet,

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

    Grüße,
    CHris

  7. #7
    Contao-Nutzer
    Registriert seit
    10.11.2012.
    Beiträge
    62

    Standard

    Zitat Zitat von tblumrich Beitrag anzeigen
    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.

  8. #8
    Contao-Nutzer
    Registriert seit
    10.11.2012.
    Beiträge
    62

    Standard

    Zitat Zitat von willshedo Beitrag anzeigen
    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.

  9. #9
    Contao-Nutzer
    Registriert seit
    10.11.2012.
    Beiträge
    62

    Standard

    Zitat Zitat von thomas.japan Beitrag anzeigen
    Setz den Farbverlauf mal auf html.
    Code:
    html {
      background: linear-gradient(45deg, #F2F2F2, #0B0B0B);
    }
    Gruß
    Thomas
    Danke, aber das hat leider nicht funktioniert.

  10. #10
    Contao-Nutzer
    Registriert seit
    09.11.2009.
    Beiträge
    82

    Standard

    Zitat Zitat von illplanet Beitrag anzeigen
    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
    クリエイター

  11. #11
    Contao-Nutzer
    Registriert seit
    10.11.2012.
    Beiträge
    62

    Standard

    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?
    Geändert von illplanet (28.12.2012 um 18:35 Uhr)

  12. #12
    Contao-Urgestein Avatar von tblumrich
    Registriert seit
    25.06.2009.
    Ort
    Feldberger Seenlandschaft
    Beiträge
    2.224
    Partner-ID
    7979
    User beschenken
    Wunschliste

    Standard

    Na dann gib uns doch mal den Link zurück...
    blucomp | Webdesign & Onlinelösungen

  13. #13
    Contao-Nutzer
    Registriert seit
    10.11.2012.
    Beiträge
    62

    Standard

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

    Wie gesagt, im FF und Chrome ist alles in Ordnung, nur eben nicht im IE.
    Geändert von illplanet (29.12.2012 um 14:13 Uhr)

  14. #14
    Contao-Nutzer
    Registriert seit
    05.01.2011.
    Beiträge
    107

    Standard

    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.
    MfG
    Jens

  15. #15
    Contao-Nutzer
    Registriert seit
    10.11.2012.
    Beiträge
    62

    Standard

    Zitat Zitat von plastiko Beitrag anzeigen
    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.
    Geändert von illplanet (29.12.2012 um 10:51 Uhr)

  16. #16
    Community-Moderator Avatar von stefan-at-work
    Registriert seit
    05.06.2009.
    Ort
    Bad Segeberg
    Beiträge
    1.780
    Partner-ID
    634

    Standard

    IE-9 und IE-8 brauchen einen Filter. Kuckst Du hier

  17. #17
    Contao-Urgestein
    Registriert seit
    30.01.2011.
    Ort
    Stuttgart
    Beiträge
    4.138

    Standard

    Stefan,

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

    LG

  18. #18
    Community-Moderator Avatar von stefan-at-work
    Registriert seit
    05.06.2009.
    Ort
    Bad Segeberg
    Beiträge
    1.780
    Partner-ID
    634

    Standard

    Zitat Zitat von magicsepp Beitrag anzeigen
    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.

  19. #19
    Contao-Urgestein
    Registriert seit
    30.01.2011.
    Ort
    Stuttgart
    Beiträge
    4.138

    Standard

    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/

  20. #20
    Contao-Nutzer
    Registriert seit
    04.12.2009.
    Beiträge
    86

    Standard

    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

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •