ScrollMagic und ganze Seite Hintergrund

Question

Ich muss in der Lage sein, einen Farbverlauf hinzufügen und über die gesamte Seite strecken. Aus irgendeinem Grund wiederholt sich der Gradient jedoch in jedem Abschnitt. Ich habe versucht, min-height: 100% zu haben, height:100% entfernend, height:auto hinzufügend; Hinzufügen des Farbverlaufs im Wrapper oder Körper statt html. Aber diese Dinge zu tun, bringt mir das Layout der Container und des Körpers. Was ist der beste Weg? Ich brauche die height: 100%

html { 
     color: #222; 
     font-size: 1em; 
     line-height: 1.4; 
     height: 100%; 
     background: linear-gradient(tomato, crimson); 
     background-repeat: no-repeat; 
     //background-size: cover; 
     //background-size: auto, cover; 
     //background-position: top left, center; 
     //b 
} 

https://codepen.io/ke1993/pen/OXqYYm

Answer 1

ändern Sie html css zu halten:

html { 
    color: #222; 
    font-size: 1em; 
    line-height: 1.4; 
    background: linear-gradient(tomato, crimson); 
} 

Diese die Höhe wird entfernen und sie automatisch auf die Seitengröße arbeiten. Der Farbverlauf wird dann automatisch eingeblendet.

Answer 2

Ihren ganzen Code in einen Wrapper Wrap, so wie ich in Ihrem Codepen getan haben, hat die Wrapper-Klasse page-wrapper und die gradient zu dieser Klasse zuzuordnen.

Hier habe ich Änderungen in Ihrem Codepen

.page-wrapper { 
    background: -webkit-linear-gradient(tomato, crimson); 
    background: linear-gradient(tomato, crimson); 
} 

Answer 3

Ändern Sie Ihre Css zu diesem können Sie Höhe halten: 100%;

html { 
    color: #222; 
    font-size: 1em; 
    line-height: 1.4; 
    height:100%; 
} 

html, body { 
    //height: 100%; 
    margin: 0; 
    background: linear-gradient(tomato, crimson); 

} 

https://codepen.io/mhadaily/pen/qNvzmb