在网页设计中，背景是构建视觉冲击力和用户体验的关键元素之一。通过巧妙地使用CSS背景拉伸技巧，可以极大地提升网页的美观度和功能性。本文将详细介绍几种常用的背景CSS拉伸方法，帮助您打造出更加出色的网页设计。

1. 背景图片的重复

1.1 水平重复（background-repeat: repeat-x;）

body {
  background-image: url('pattern.jpg');
  background-repeat: repeat-x;
}

1.2 垂直重复（background-repeat: repeat-y;）

body {
  background-image: url('pattern.jpg');
  background-repeat: repeat-y;
}

1.3 不重复（background-repeat: no-repeat;）

body {
  background-image: url('pattern.jpg');
  background-repeat: no-repeat;
}

2. 背景定位

2.1 百分比定位

body {
  background-image: url('pattern.jpg');
  background-position: 50% 50%;
}

2.2 像素定位

body {
  background-image: url('pattern.jpg');
  background-position: 10px 20px;
}

3. 背景尺寸

3.1 容器大小（background-size: contain;）

body {
  background-image: url('pattern.jpg');
  background-size: contain;
}

3.2 覆盖大小（background-size: cover;）

body {
  background-image: url('pattern.jpg');
  background-size: cover;
}

3.3 宽度高度（background-size: 100px 200px;）

body {
  background-image: url('pattern.jpg');
  background-size: 100px 200px;
}

4. 总结