responsive Hintergrund mit resizable div Inhalt

Question

Ich habe ein Beispiel in plunker gemacht, um mein Problem besser zu erklären. Mein Problem ist, wenn ich mit der Fenstergröße spiele, der Hintergrund reagiert und alles gut ist, aber wenn ich den Inhalt um mehr als die Fenstergröße erweitere und dann nach unten scrolle, sehe ich, wie sich die Hintergrundfarbe wiederholt. Ich habe viele Möglichkeiten versucht, um dieses Problem zu lösen, aber das Ergebnis ist immer ähnlich. Ich schätze es, wenn jemand mir helfen könnte, dieses Problem zu lösen.

Mein CSS-Code:

html { 
    height: 100%; 
} 
body { 

    margin: 0; 
    font-size: 12px !important; 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 

    background-repeat:no-repeat; 
    background-size:cover; 

    background: rgba(183,222,237,1); 
    background: -moz-linear-gradient(top, rgba(183,222,237,1) 0%, rgba(33,180,226,0.64) 51%, rgba(183,222,237,0.3) 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(183,222,237,1)), color-stop(51%, rgba(33,180,226,0.64)), color-stop(100%, rgba(183,222,237,0.3))) fixed; 
    background: -webkit-linear-gradient(top, rgba(183,222,237,1) 0%, rgba(33,180,226,0.64) 51%, rgba(183,222,237,0.3) 100%); 
    background: -o-linear-gradient(top, rgba(183,222,237,1) 0%, rgba(33,180,226,0.64) 51%, rgba(183,222,237,0.3) 100%); 
    background: -ms-linear-gradient(top, rgba(183,222,237,1) 0%, rgba(33,180,226,0.64) 51%, rgba(183,222,237,0.3) 100%); 
    background: linear-gradient(to bottom, rgba(183,222,237,1) 0%, rgba(33,180,226,0.64) 51%, rgba(183,222,237,0.3) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b7deed', endColorstr='#b7deed', GradientType=0); 
} 
.child-grid { 
    background-color: rgb(255, 255, 255); 
    margin: 10px 10px 10px 10px; 
    padding:10px; 
    resize:vertical; 
    overflow:visible; 
    overflow-y:scroll; 
    border-radius: 5px; 
    /* own property*/ 
    /*width: 95%;*/ 
    height: 300px; 
    min-height: 250px; 
    border: 1px solid lightgray; 
} 

Answer 1

Fügen Sie diese Zeile mit dem Body-Tag:

background-attachment: fixed; 

wie this

Die

Answer 2

Es scheint, dass Sie die folgende Zeile nach den Hintergrund-Eigenschaften hinzufügen:

background-repeat:no-repeat;