背景重复将导致图像以奇怪的方式重复

Question

我试图创建一个可以重复的身体背景图像。遗憾的是，图像以一种奇怪的方式重复，正如您在以下网站上看到的那样：Link to the background image

我的css代码如下所示：

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

我错误地认为图像会以这种方式重复：

Answer 1

图像的上半部分与底部不同。

你应该使用一个非常小的图像并重复它。
这样的事情：http://i.imgur.com/jrgPqrD.png

使用数据/ uri而不是图像可能更明智，这样您就不必托管它。

根据您的图片，这是一个示例：Demo on jsfiddle

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