背景圖片 ( 重複、固定 )

這篇教學會介紹 CSS 背景圖片相關的樣式屬性，會運用 background-repeat 設定背景圖片的重複，也會使用 backgroud-attachment 設定背景圖是否固定在網頁中，當捲動網頁時背景圖固定不動。

快速導覽：

• background-repeat 背景圖片重複
• background-attachment 背景圖片固定

background-repeat 背景圖片重複

background-repeat 可以設定「背景圖是否重複」，沒有繼承特性，具有下列幾個屬性值：

下列使用幾個 div 呈現不同的 background-repeat 屬性值效果。

線上展示：https://codepen.io/oxxo/pen/JjQoQPg

<!-- 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」，第一個屬性值表示水平方向的重複，第二個屬性值表示垂直方向重複，下方列出與一個屬性值的對照表。

下方範例會運用兩個屬性值的方式，做出水平與垂直使用不同重複方式的效果。

線上展示：https://codepen.io/oxxo/pen/mdZyZdr

<!-- 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 可以設定背景圖片「是否跟隨視窗或元素內容而捲動」，沒有繼承特性，具有下列屬性值：

下方範例會使用三個 div，分別呈現不同的 background-attachment 效果，當中使用了 overflow: scroll; 樣式讓 main 和 div 在「內容超出範圍」時可以捲動，所以可以使用滑鼠分別捲動 main 和 div 元素，捲動時就能觀察背景固定或跟隨捲動的狀態，此外，設定 fixed 的 div，背景圖是根據 body 元素做定位。

線上展示：https://codepen.io/oxxo/pen/MWMYMWq

<!-- 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 都是網頁設計中常見的背景處理技巧，不論是個人網頁或是大型公司的網頁，都會充分運用這些樣式來讓背景圖更有特色。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～