各位同學好~
今天要來分享的 CSS 語法練習，其實是之前有一篇「固定背景圖教學文」的延伸版，這次要教大家利用上一篇的網頁版型，來做重複背景圖片的語法練習。
如果是第一次加入的新朋友，要請您先參考上一篇之後，再來 follow 本篇教學才會比較銜接得上喔！(傳送門在此 ↓↓↓)
至於已經有練過的同學，也可以重新開啟上次做的網頁檔，其中會有一些雷同的基本結構或語法就可以直接複製套用，不必重打一遍喔~
在開始今天的練習之前，還要請大家先準備好兩張素材圖片，等一下需要用來分別當做水平重複及垂直重複的背景圖；
假如手邊沒有相關資源的話，可以參考一下之前小編整理過的免費圖樣網址，下載之後再做適當裁切即可使用。
【設計資源】- 春暖花開之免費 pattern 下載 – 共 10 組
【好站報報】 日本「FLAT ICON DESIGN」免費資源網站
這邊順便提供小編所使用的背景圖片尺寸，給同學們做個參考：「 bg1.png 」為 200 px * 350 px ，「 bg2.png 」為 50 px * 50 px 。
素材都備齊之後，我們就要進入正式的練習囉！Ready~~~ Go！
【一】HTML 網頁架構
第一個步驟，依然是從建立 HTML 架構開始做起，第一次加入的新手同學請先參考下方圖示來編寫 :
如果是已經練習過上一篇教學，且手邊正好也有檔案的同學，想要節省一點時間偷吃步的話，
只要在開啟上一篇教學練習中的 HTML 檔案後，將 原本<div id = “CONTENT”> 的下方，再新增一行 <div id = “INBOX”> 即可，(如圖示紅框處)
當然，不要忘記在 </body> 上面也要補上一個相對應的</div>喔！
【二】可直接套用上一篇之 CSS 語法
在附加 CSS 外部樣式表 (「 layout.css 」) 之後，我們可先列出總共有哪些語法項目需要編寫。
接下來，請開啟上次已練習過的「固定背景圖」-「 layout.css 」的檔案，因為有許多雷同的部分，我們可以直接複製後，貼在這邊；
完成之後，語法部分應該會與下圖相符合：
圖片中標示紅框處，是未完成的部分，其中包括這次範例中，要用來重複背景圖片的 CSS 語法設定，稍後留到下個步驟中我們再繼續編寫喔。
至於目前網頁在瀏覽器下的預覽，則是如下圖：
【三】重複背景圖片-水平式(x軸)
一開始，有請大家準備了兩張不同尺寸的圖片，
在這個步驟中，我們就先來利用尺寸較大的圖檔，做第一種「水平式」( x 軸)重複背景圖片的語法練習吧。
請參考下方圖示，在「 body 」中做 background 的 CSS 語法設定：
這次的 background 寫法是直接使用較進階的縮寫方式，除了紅框標記處是這次教學文的新重點，其他縮寫的個別含意，都有在前一篇的教學文裏頭詳細解說過了；
如果還是不熟的同學，請回到前一篇做複習，小編這次就不多做解釋囉。
至於 padding-bottom 的設定，則與前一篇相同不變。
完成之後，網頁預覽如下：
【四】完成 # INBOX 語法設定
由於在上一步驟中，選用了比較深的背景顏色及圖片，所以這邊先中途插播一下，我們先來完成 # INBOX 的版型設定：
如圖示，紅框標示處就是這個步驟中添加的語法，大家可以從中學到，如何利用 background-color 語法的參數，來設定背景的「不透明度」喔。
這時，我們再來預覽一下網頁：
嗯~
整體看起來是不是比較有層次感了呢？！
【五】重複背景圖片-垂直式(y軸)
做到這邊，檢視一下「 layout.css 」附加樣式表…，我們也只剩下一個地方還空著未完成！
沒錯~接下來的垂直式( y 軸)重複背景圖片，就是寫在 # CONTENT 裡面喔。
當然，要載入的圖片就是剩下的另外一張素材檔。
做到這裏，這次分享的重複背景圖片語法練習，就可以收工啦。
希望同學們在接連做完這兩篇範例練習之後，
能夠對於背景圖片相關之 CSS 語法設定更加上手，
謝謝大家的觀看~下次見囉！
當您對本文有任何問題或指教，歡迎到我們的【網頁設計交流討論區】一起交流討論喔！