首先，让我们了解下CSS中的几种主要背景图平铺模式：
1. **repeat**：这是默认值，表示背景图像将在水平和垂直方向上重复以填充整个容器区域。例如：
css
div {
background-image: url('bg.png');
background-repeat: repeat;
}
2. **no-repeat**：正如其名，该样式将禁止背景图像进行任何复制或平铺行为，只显示一次于指定的位置（由`background-position`决定）。示例代码如下：
css
div {
background-image: url('logo.jpg');
background-repeat: no-repeat;
width: 300px;
height: 80px;
}
3. **repeat-x/repeat-y**：这两种选项分别控制了背景图像仅在一个维度上的平铺。
- `repeat-x`: 背景图片会在X轴（横向）连续重复；
示例:
css
body {
background-image: linear-gradient(to right, red , yellow);
background-repeat: repeat-x;
}
- `repeat-y`: 则是在Y轴（纵向）上做同样的操作；
4. **round**: 当尺寸无法被整除时，“round”会尽量均匀分布并缩放背景图像来完全覆盖背景区，可能会导致部分图片变形但能确保所有空间都被填满。
5. **space**：这种情况下，若背景区大于实际可完整展示一个图案的空间，则剩余空白将以平均分配的方式插入到各个副本之间，这样不会拉伸图像而可能留下一些未贴合边缘的部分不被背景图像遮盖。
举例来说，在创建网站顶部导航栏或者侧边菜单的时候，我们可以利用“reapeat-x”的特性使得某个纹理或者线条性图形沿横轴延伸从而达到装饰的效果；而在制作全屏大背景下，结合"cover" 或 "contain" 的 background-size 属性以及适当的 “no-repeat”，则能让一张高清的大图适配各种屏幕大小的同时保持良好的观感体验。
总结起来，对CSS背景图像的不同平铺方式进行深入理解和熟练掌握，无疑能够帮助我们构建出更丰富多样的界面风格及布局形态，使我们的Web作品更具吸引力和专业度。