# CSS 17. background image and color

### 認識 background 原理及應用:

- background-color:

1. 有兩個 h1 隊名範例:

<h1>
  fubon guardinas
</h1>

<h1>
  CTBC brothers
</h1>

2. 導入` background-color` 屬性:

h1 {
  background-color: rgba(10,0,255,0.5);
}

// 另一種寫法:

也可以直接打色碼#000000; 或是顏色屬性:red 諸如此類。


---

### background-image / 在網頁上導入背景圖片:

- 很多時候，我們會需要一張背景圖片，讓網頁看上去不這麼單調。

此時就需要認識到幾種**屬性:**

1. **background-image**:

- 兩種組法:

1-1. 可使用相對位置，自己 PC 的路徑來鍵入(範例):

  background-image: url('./img/fg/2022cover.jpeg');

---

-
1-2. 使用絕對位置，查找圖片的網址， copy url 即可:

background-image: url('輸入網址');

2. **background-size**:

- 再導入圖片時會發現，有些圖片可能因為大小的關係，會重複出現在網頁上：


- 這是因為，當網頁瀏覽器太大時，**background-image** 內建的屬性:

**background-repeat**，會預設自動 repeat 到整個網頁結束這樣。

提供以下方法來解決。

3. 解決 repeat 的方式:

// 預設:
background-size: content

// 改成:

background-size: cover;

4. **background-repeat**設定: `no-repeat`:

// 預設 content 圖片不夠大會 repeat，使用下列語法可解除:
background-repeat: no-repeat;

3. **background-position**:

- 可透過 [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position) 瀏覽各種更改 **background-position **作法

###### tags: `2022 網頁開發全攻略教程 / CSS篇章 - box model`