CSS 顯然是前端開發的重要一環。其中，CSS 圖片背景平鋪更是了解必備之一。

CSS 有以下幾種圖片背景平鋪的方式：

/* 水平、垂直背景平鋪 */
background-repeat: repeat;
/* 水平、不垂直背景平鋪*/
background-repeat: repeat-x;
/* 垂直、不水平背景平鋪 */
background-repeat: repeat-y;
/* 不水平、不垂直背景平鋪 */
background-repeat: no-repeat;

其中，repeat 代表水平、垂直背景平鋪，即橫向縱向都重復。repeat-x 和 repeat-y 同理，只在一個方向上重復。no-repeat 則表示不平鋪。

應用的方法也很簡單，比如下面的例子：

div {
/* 圖片的 url */
background-image: url(./background-image.png);
/* 水平、垂直背景平鋪 */
background-repeat: repeat;
/* 背景圖的顯示位置和大小，居中顯示 */
background-position: center center;
background-size: 50%;
}

這代表一個寬高都為 400px 的 div 元素，將使用名為 background-image.png 的圖片作為背景，并對其進行水平、垂直平鋪。圖片居中顯示，大小為原圖的 50%。

如果你將 repeat 改為 repeat-x 或 repeat-y，分別可以做到水平或垂直平鋪效果。而 no-repeat 則是不平鋪圖片。

最后，需要提醒的是，如果圖片比背景區域小，那么平鋪的效果可能不明顯。