在網頁設計中，背景照片是非常重要的元素之一。網頁設計師通常使用CSS來添加背景照片。在本文中，我們將會學習如何使用CSS添加背景照片。
首先，要添加背景照片，需要先選擇一個照片。可以使用自己拍攝的照片，或者從免費圖片庫中下載照片。一旦選定了照片，就可以開始添加背景照片了。
在CSS中，可以使用background-image屬性來添加背景照片。以下是一個例子：

.example {
background-image: url('example.jpg');
}

在此例子中，.example是指需要添加背景照片的元素類名。background-image屬性中的url()指定了圖片的路徑和文件名。如果照片和CSS文件在同一目錄下，只需要指定文件名即可。
如果需要在元素中平鋪照片，可以使用background-repeat屬性。以下是一個例子：

.example {
background-image: url('example.jpg');
background-repeat: repeat;
}

在此例子中，background-repeat屬性被設置為repeat。這將導致照片在元素中水平和垂直方向上重復平鋪。背景圖片有以下可能的重復值：“repeat”、“repeat-x”、“repeat-y”和“no-repeat”。
如果需要更改照片的位置，可以使用background-position屬性。以下是一個例子：

.example {
background-image: url('example.jpg');
background-position: center top;
}

在此例子中，background-position屬性被設置為center top。這將使照片位于元素的中心頂部位置。background-position還支持長度和百分比值。例如：background-position: 30px 50px。
另外，還可以使用background-size屬性來控制背景照片的大小。以下是一個例子：

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

在此例子中，background-size屬性被設置為cover。這將使照片被拉伸成與元素完全匹配的大小，不會出現空白區域。其他的選項還有：“contain”、“auto”和指定寬度和高度。例如：background-size: 50% 50%;
總結一下，通過這些CSS屬性的使用就可以添加和調整網頁的背景照片。如果需要更多細節的控制，可以在以上提到的屬性中使用其他值。在設計過程中，可以嘗試不同的背景圖片和屬性來獲得最好的視覺效果。