Hintergrund wiederholen wird das Bild auf eine seltsame Weise zu wiederholen

Question

Ich versuche, ein Körperhintergrundbild zu erstellen, das sich wiederholen würde. Leider wiederholt sich das Bild in eine seltsame Art und Weise, wie Sie auf der folgenden Website sehen: Link to the background image

Mein CSS-Code sieht wie folgt aus:

body { 
    margin: 0px; 
    width: 100%; 
    height: 100%; 
    background-image: url("../img/background.png"); 
    background-repeat: repeat; 
} 

Was mache ich falsch, dass das Bild in diesem wiederholen würde Weg:

Answer 1

der obere Teil des Bildes, ist anders als die Unterseite.

Sie sollten ein sehr kleines Bild verwenden und das wiederholen.
Etwas wie folgt aus: http://i.imgur.com/jrgPqrD.png

Es könnte klüger, eine Daten zu verwenden/uri, anstatt ein Bild, auf diese Weise werden Sie es nicht hosten müssen.

Hier ist ein Beispiel, wie pro Ihr Bild: Demo on jsfiddle

html { 
 
    height: 100%; 
 
    width: 100%; 
 
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAgMAAAC5YVYYAAAADFBMVEUBupkBlHoBlXoClXqzJdbeAAAAIElEQVQI12NgCGVgnsLAmsAg2sBQzcCwhZEhgZPhgBgALyMEVqftfRkAAAAASUVORK5CYII=); 
 
}