要创建一个不重复的背景图像，您可以使用HTML5的canvas元素和JavaScript来实现。下面是一个示例代码：

HTML部分：

JavaScript部分：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// 创建一个Image对象来加载您的图像
var img = new Image();
img.src = "path_to_your_image.jpg";

// 在图像加载完成后执行绘制函数
img.onload = function() {
  drawBackground();
};

function drawBackground() {
  // 设置canvas的尺寸和背景图像的尺寸一样
  canvas.width = img.width;
  canvas.height = img.height;

  // 在canvas上绘制背景图像
  // 使用drawImage()函数绘制图像，并设置其x和y坐标为0以确保从左上角开始绘制
  ctx.drawImage(img, 0, 0);

  // 将canvas的背景设置为透明
  // 使用canvas的globalCompositeOperation属性将背景设置为透明
  ctx.globalCompositeOperation = "destination-out";
  ctx.fillStyle = "rgba(0, 0, 0, 1)";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
}

请确保将代码中的"path_to_your_image.jpg"替换为您自己的图像路径。此代码将创建一个canvas元素，并将背景图像绘制到canvas上。然后，它使用globalCompositeOperation属性将canvas的背景设置为透明，从而创建一个不重复的背景图像。

注意：由于使用canvas绘制图像需要一些计算和绘制时间，因此对于大尺寸的图像可能会导致性能问题。如果您使用的是大尺寸的图像，请确保进行适当的优化。