背景圖片 ( 重複、固定 )
這篇教學會介紹 CSS 背景圖片相關的樣式屬性，會運用 background-repeat 設定背景圖片的重複，也會使用 backgroud-attachment 設定背景圖是否固定在網頁中，當捲動網頁時背景圖固定不動。
快速導覽：
background-repeat 背景圖片重複
background-repeat 可以設定「背景圖是否重複」，沒有繼承特性，具有下列幾個屬性值：
| 屬性值 | 說明 |
|---|---|
| repeat | ( 預設值 ) 使用背景圖所設定的尺寸連續並重複出現，超過範圍的背景圖會被裁切。 |
| no-repeat | 不重複，呈現單一張背景圖。 |
| space | 使用空白分隔重複的背景圖，保持原本長寬尺寸重複且不被裁切。 |
| round | 修改重複的背景圖的長寬比例，讓重複的背景圖不被裁切。 |
| repeat-x | 等同 repeat 但只在水平方向重複。 |
| repeat-y | 等同 repeat 但只在垂直方向重複。 |
下列使用幾個 div 呈現不同的 background-repeat 屬性值效果。
<!-- HTML 程式碼 -->
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
<div class="f"></div>
<!-- CSS 程式碼 -->
<style>
div {
height: 120px;
width: 160px;
margin: 10px;
border: 1px solid #000;
background-image: url("https://steam.oxxostudio.tw/download/css/border-img-2.jpg");
background-size: 50px;
}
.a {background-repeat: repeat;} /* 按照圖片設定尺寸重複 */
.b {background-repeat: no-repeat;} /* 不重複 */
.c {background-repeat: space;} /* 使用空白分隔重複的背景圖，保持原本長寬尺寸重複且不被裁切 */
.d {background-repeat: round;} /* 修改重複的背景圖的長寬比例，讓重複的背景圖不被裁切 */
.e {background-repeat: repeat-x;} /* 水平重複 */
.f {background-repeat: repeat-y;} /* 垂直重複 */
</style>
background-repeat 除了使用「一個」屬性值，也可以使用「兩個」屬性值 ( 使用空白分隔 )，例如「repeat round」，第一個屬性值表示水平方向的重複，第二個屬性值表示垂直方向重複，下方列出與一個屬性值的對照表。
| 一個屬性值 | 等同兩個屬性值 |
|---|---|
| repeat | repeat repeat |
| no-repeat | no-repeat no-repeat |
| space | space space |
| round | round round |
| repeat-x | repeat no-repeat |
| repeat-y | no-repeat repeat |
下方範例會運用兩個屬性值的方式，做出水平與垂直使用不同重複方式的效果。
<!-- HTML 程式碼 -->
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<!-- CSS 程式碼 -->
<style>
div {
height: 120px;
width: 160px;
margin: 10px;
border: 1px solid #000;
background-image: url("https://steam.oxxostudio.tw/download/css/border-img-2.jpg");
background-size: 50px;
}
.a {background-repeat: repeat space;} /* 水平 rpeat，垂直 space */
.b {background-repeat: space round;} /* 水平 space，垂直 round */
.c {background-repeat: repeat round;} /* 水平 rpeat，垂直 round */
</style>
background-attachment 背景圖片固定
background-attachment 可以設定背景圖片「是否跟隨視窗或元素內容而捲動」，沒有繼承特性，具有下列屬性值：
| 屬性值 | 元素內容捲動 | 視窗捲動 | 背景位置 |
|---|---|---|---|
| scroll | 固定 ( 預設值 ) | 跟著捲動 ( 預設值 ) | 相對元素 |
| fixed | 固定 | 固定 | 相對 body |
| local | 跟著捲動 | 跟著捲動 | 相對元素 |
下方範例會使用三個 div，分別呈現不同的 background-attachment 效果，當中使用了 overflow: scroll; 樣式讓 main 和 div 在「內容超出範圍」時可以捲動，所以可以使用滑鼠分別捲動 main 和 div 元素，捲動時就能觀察背景固定或跟隨捲動的狀態，此外，設定 fixed 的 div，背景圖是根據 body 元素做定位。
<!-- HTML 程式碼 -->
<main>
<div class="a">STEAM 教育學習網是一個針對 STEAM 教育所設立的網站，目標整合各種程式、科學、科技、工藝或設計相關的基礎知識。隨著資訊科技進步以及「後疫情」時代的來臨，「自學」的趨勢也日益盛行，透過這個網站，除了紀錄我自己的學習歷程，更可以將目前正夯的新知或技術，分享給所需要的大朋友小朋友，希望對於想要自學的學生、家長或老師有所幫助。</div>
<div class="b">STEAM 教育學習網是一個針對 STEAM 教育所設立的網站，目標整合各種程式、科學、科技、工藝或設計相關的基礎知識。隨著資訊科技進步以及「後疫情」時代的來臨，「自學」的趨勢也日益盛行，透過這個網站，除了紀錄我自己的學習歷程，更可以將目前正夯的新知或技術，分享給所需要的大朋友小朋友，希望對於想要自學的學生、家長或老師有所幫助。</div>
<div class="c">STEAM 教育學習網是一個針對 STEAM 教育所設立的網站，目標整合各種程式、科學、科技、工藝或設計相關的基礎知識。隨著資訊科技進步以及「後疫情」時代的來臨，「自學」的趨勢也日益盛行，透過這個網站，除了紀錄我自己的學習歷程，更可以將目前正夯的新知或技術，分享給所需要的大朋友小朋友，希望對於想要自學的學生、家長或老師有所幫助。</div>
</main>
<!-- CSS 程式碼 -->
<style>
main {
width: 430px;
height: 200px;
padding: 5px;
border: 1px solid #000;
overflow: scroll; /* 設定內容超出範圍就捲動 */
background: #fff9;
}
div {
float: left; /* 靠左浮動 */
width: 120px;
height: 300px;
border: 1px solid #000;
margin: 5px;
padding: 5px;
font-size: 14px;
color: #fff;
overflow: scroll; /* 設定內容超出範圍就捲動 */
background-image: url("https://steam.oxxostudio.tw/image/index-css.jpg");
}
.a {background-attachment: scroll;}
.b {background-attachment: fixed;}
.c {background-attachment: local;}
</style>
小結
background-repeat 和 backgroud-attachment 都是網頁設計中常見的背景處理技巧，不論是個人網頁或是大型公司的網頁，都會充分運用這些樣式來讓背景圖更有特色。
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～