---
# System prepended metadata

title: "\U0001F3C5 Day 17"
tags: [網頁切版直播班 - 2022 夏季班]

---

---
tags: 網頁切版直播班 - 2022 夏季班
---
# 🏅 Day 17

## background-image

### 認識 CSS 語法 background-image 

通常會用來設定背景圖片，用法如下：

```htmlembedded=
<div class="image"></div>
```

```css=
.image{
  height:300px;
  background-image:url("https://images.unsplash.com/photo-1599978364004-95d0725c5bb9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80")
}
```
> 開發時可以使用相對路徑或絕對路徑，不過因為 Codepen 無法載入本地圖片，需透過圖片位址（絕對路徑）


* **background-position**

    如果圖片太大則會出現這樣的畫面

    ![](https://i.imgur.com/18kReJN.png)
    什麼都看不到XD

    要調整他的位置可以使用 `background-position`
    > top ｜ bottom ｜ left ｜ right ｜ center

    ```css
     background-position: center;
    ```

    ![](https://i.imgur.com/EZdkxzS.jpg)

* **background-size**
    但是原圖並沒有這麼大，所以使用 `background-size` 調整
    
    > auto ｜ contain ｜ cover

    ```css
    background-size: contain;
    ```
    ![](https://i.imgur.com/hPuts4F.png)
    
    background-size 改用 cover 查看兩者的差別。
    > contain 是在不超過原圖的大小前提下等比縮小
    > cover 是等比例縮放，讓圖片可以蓋滿元素寬高。
    ```css
    background-size: cover;
    ```

    ![](https://i.imgur.com/uOkBksW.jpg)

* **background-repeat**
    背景圖片重複的問題，為了不讓他重複所以要使用 `background-repeat` 設定
    
    > repeat(預設值)｜ repeat-x ｜ repeat-y ｜ no-repeat
    > 
    ```css
    background-repeat: no-repeat;
    ```

    ![](https://i.imgur.com/ur2kWEi.png)



**完整程式碼**
```htmlembedded=
<div class="image"></div>
```
```css=
.image{
  height:300px;
  background-image:url("https://images.unsplash.com/photo-1599978364004-95d0725c5bb9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
```


## 題目

請到 [Unsplash 官網](https://unsplash.com/)上找一張圖片，並使用 background-image 製作背景圖（請不要複製上方程式碼）

[Codepen 範例-背景圖應用](https://codepen.io/hexschool/pen/mdxdbxo)（可只做背景圖的部分，文字部分可以省略）

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 
解答位置請參考下圖（需打開程式碼的部分觀看）

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答： -->


回報區
---


|      Discord      |                               CodePen / 答案                               |
|:-----------------:|:--------------------------------------------------------------------------:|
|     薏慈#3795     |              [CodePen](https://codepen.io/its_wang/pen/OJvEQKq)               |
|     Anna Liu#3794     |              [CodePen](https://codepen.io/anna618/pen/YzaZbjL)               |
|     小鐵#2814     |              [CodePen](https://codepen.io/xiron/pen/GRxWWMm)               |
|   CloThEs#7837    |             [CodePen](https://codepen.io/CloThEsZ/pen/RwMpoOE)             |
|    布魯諾#7239    |             [CodePen](https://codepen.io/bruno-yu/pen/jOzBypL)             |
|    黃士桓#7654    |          [codePen](https://codepen.io/shr-huan-huang/pen/dymvNjB)          |
|    Clara#1275     |             [codePen](https://codepen.io/bsupixqu/pen/poLeRXL)             |
| bonnieli1414#4906 |    [codePen](https://codepen.io/bonnieli1414/pen/bGvqgJW?editors=1100)     |
|    JackC#0411     |             [codePen](https://codepen.io/key0329/pen/gOemgVw)              |
|     L0F0#8733     |               [codePen](https://codepen.io/l0f0/pen/qBorrBe)               |
|   Daisy_Li#4231   | [CodePen](https://codepen.io/lidairong-gmail-com/pen/zYWZNeM?editors=1100) |
|   Jamie Wu#9345   |             [CodePen](https://codepen.io/Wu220103/pen/RwMpKzr)             |
|   WEI_RIO#9342    |       [CodePen](https://codepen.io/wei_wu/pen/vYRxxgX?editors=1100)        |
|  Clara Cai#7097   |           [CodePen](https://codepen.io/Clara-Snowy/pen/BarWWdm)            |
|    azami#5986     |              [CodePen](https://codepen.io/azami/pen/xxWqqxN)               |
|  christina#6185   |            [Codepen](https://codepen.io/chrisc0210/pen/RwMppWR)            |
|   LinaChen#1796   |             [CodePen](https://codepen.io/LinaChen/pen/qBorrpO)             |
|      YC#2522      |               [Codepen](https://codepen.io/YCLu/pen/qBorrXd)               |
|     洋蔥#5295     |        [Codepen](https://codepen.io/HSUNA/pen/RwMppRG?editors=1100)        |
|   Jenny真#7532    |           [CodePen](https://codepen.io/wei-chen-wu/pen/XWEMpvy)            |
|     大衛#4869     |             [CodePen](https://codepen.io/exnsrpjc/pen/XWEMpwy)             |
|  PeggyLiao#1552   |     [CodePen](https://codepen.io/PeiJu-Liao/pen/yLKMMjZ?editors=1100)      |
|     小諾#1866     |             [CodePen](https://codepen.io/noichan/pen/KKoWWLE)              |
|      YI#0863      |              [CodePen](https://codepen.io/YI0305/pen/ExEWWGj)              |
|    Cliff#4606     |            [CodePen](https://codepen.io/Cliff_hex/pen/OJvpmLE)             |
|  Leo Song #8278   |            [CodePen](https://codepen.io/sunnylaba/pen/MWVpmgN)             |
|     威爾#1694     |             [codePen](https://codepen.io/WILL_Wu/pen/LYdWWMR)              |
|    hungya#0773    |            [CodePen](https://codepen.io/hungya777/pen/KKoWWbJ)             |
|  Iris Huang#6727  |             [CodePen](https://codepen.io/ythuang/pen/RwMpVoM)              |
|     int#7518      |      [Codepen](https://codepen.io/intHuang/pen/vYRxmgR?editors=0110)       |
|     群嘉#3943     |      [CodePend](https://codepen.io/efzdamnp-the-lessful/pen/qBormxP)       |
|    JarDar#6980    |            [codepen](https://codepen.io/jardarpen/pen/gOemWgd)             |
|     Hsiu#8767     |             [codepen](https://codepen.io/amy-hsiu/pen/jOzBmVj)             |
|     溡月#2553     |          [CodePen](https://codepen.io/winterwinterpu/pen/yLKMMdd)          |
|     LINK#1933     |             [CodePen](https://codepen.io/miyayoe/pen/eYMvWqW)              |
|   Tuhacrt#0008    |             [CodePen](https://codepen.io/Tuhacrt/pen/mdxWwPY)              |
|    阿翰 #1984     |            [codepen](https://codepen.io/JohnHan05/pen/JjLWJZw)             |
|    Melon #0380    |             [codepen](https://codepen.io/BalaFang/pen/zYWZzaL)             |
|    Henry#7386     |              [Codepen](https://codepen.io/h1nr9/pen/LYdWLJv)               |
|     zera#6060     |            [codepen](https://codepen.io/zera-tseng/pen/bGvqRxg)            |
|     yuyu#6310     |             [codepen](https://codepen.io/yuyu0905/pen/GRxWvKq)             |
|     QOO#8446      |       [Codepen](https://codepen.io/QOOQOOQ/pen/rNdymzL?editors=1100)       |
|    黑白兔#0684    |            [Codepen](https://codepen.io/johnny329/pen/WNzpEwd)             |
|     威0#6919      |           [Codepen](https://codepen.io/n0918679182/pen/rNdyzKE)            |
|    Benson#6763    |             [Codepen](https://codepen.io/kumashow/pen/bGvqryx)             |
|     雷雷#7844     |            [Codepen](https://codepen.io/lei-yi-jie/pen/LYdWjrN)            |
|  LHchien33#6232   |            [Codepen](https://codepen.io/lin_chien/pen/JjLWrgL)             |
|    SASIMI#5099    |           [Codepen](https://codepen.io/sashimi1327/pen/oNqzjBj)            |
|      痴醉兔       |             [Codepen](https://codepen.io/wei-nie/pen/BarWmPz)              |
|  suihsilan#9485   |            [Codepen](https://codepen.io/suihsilan/pen/PoRpOLz)             |
|  我是泇吟 #5189   |             [Codepen](https://codepen.io/kljuqbxs/pen/qBorxWq)             |
|   ajhappy#6488    |           [Codepen](https://codepen.io/ajhappy5438/pen/KKoWQPY)            |
|    鉦勝 #8333     |           [[Codepen]](https://codepen.io/atckmax823/pen/MWVpQVK)           |
|      Chi#7605    |             [Codepen](https://codepen.io/YoChi84/pen/ZExerNL)               |
|      peter#0    |             [Codepen](https://codepen.io/JIAN-RONG/pen/PoRpeBO?editors=1100)      |
|      RayChen#6088    |             [Codepen](https://codepen.io/raychen1996/pen/gOemzVv)      |
|      leeli#6243    |             [Codepen](https://codepen.io/leelilee/pen/JjLWvqX)      |
|    Fanglin#4054    |    [CodePen](https://codepen.io/flynn841028/pen/bGvqvYe)    |
|    YU #0618    |    [CodePen](https://codepen.io/yoken_/pen/yLKMKJM)    |
|     楓之聲#6945     |            [codepen](https://codepen.io/sshane258/pen/poLeKEM)            |
|yu魚#1330   |  [CodePen](https://codepen.io/Yu_yu/pen/jOzBzpw)| 
|ssozr#4680|[codepen](https://codepen.io/ssozr/pen/WNzpKrr)|
|Pony#6778|[codepen](https://codepen.io/Pony0303/pen/gOemjvb)|
|Joyce#3790|[codepen](https://codepen.io/joycehuang/pen/eYMvVqv?editors=1100)|
| Jason1#2538 | [CodePen](https://codepen.io/jotwxezb-the-encoder/pen/KKoWxwQ) |
| 咻蹦#1526 | [CodePen](https://codepen.io/emmasyu/pen/KKoWBLy?editors=1100)|
| Mylène#2481 |[Codepen](https://codepen.io/hamajibashi/pen/jOzBvPY)|
|Shuo#1596 | [Codepen](https://codepen.io/chiangchungshuo/pen/mdxWzRx)|
|小白#2406|[Codepen](https://codepen.io/gracewhite/pen/qBorvRy)|
|jin.huang#4666|[Codepen](https://codepen.io/HJ7878/pen/RwMpmrj?editors=1100)|
|Amberhh#2465|[Codepen](https://codepen.io/Amberhh/pen/bGvqyYZ?editors=1100)|
|Arista#5802|[Codepen](https://codepen.io/arista-hsieh/pen/ZExedGL)|
|Ryan Chiang#6649|[Codepen](https://codepen.io/ryanchiang/pen/rNdyEjG)|
|紙飛機#1335|[Codepen](https://codepen.io/paperplanea/pen/abYJgKj)|
|mickey#8745|[Codepen](https://codepen.io/weizhetseng/pen/xxWqoyy)|
|Vera#5592|[Codepen](https://codepen.io/skvera/pen/ZExegpM)|
|Yuna Huang#2692|[Codepen](https://codepen.io/Yuna1002/pen/qBoreXB)|
|kevin6131 Huang#2692|[Codepen](https://codepen.io/kun8349/pen/NWYpQLM)|
| EmilyLin#0526 |[Codepen](https://codepen.io/c199615/pen/rNdmaJR)||Ron Liang#7277|[Codepen](https://codepen.io/ron-go/pen/bGvWNdW)|
|Van.CS|[Codepen](https://codepen.io/fbacojji-the-selector/pen/rNdmVPW)|
|    Anna Liu#3794     |     |     |     |
|      小鐵#2814       |        [CodePen](https://codepen.io/xiron/pen/GRxWWMm)          |
|     CloThEs#7837     |     |     |     |
|     布魯諾#7239      |     |     |     |
|     黃士桓#7654      |     |     |     |
| Clara#1275 |[CodePen](https://codepen.io/bsupixqu/pen/poLeRXL)|
|  bonnieli1414#4906   |     |     |     |
|      JackC#0411      |     |     |     |
|      L0F0#8733       |     |     |     |
|    Daisy_Li#4231     |     |     |     |
|    Jamie Wu#9345     |     |     |     |
|     WEI_RIO#9342     |     |     |     |
|    Clara Cai#7097    |     |     |     |
|      azami#5986      |     |     |     |
|    christina#6185    |     |     |     |
|    LinaChen#1796     |     |     |     |
|       YC#2522        |     |     |     |
|      洋蔥#5295       |     |     |     |
|     Jenny真#7532     |     |     |     |
|      大衛#4869       |     |     |     |
|    PeggyLiao#1552    |     |     |     |
|      小諾#1866       |     |     |     |
|       YI#0863        |     |     |     |
|      Cliff#4606      |            [CodePen](https://codepen.io/Cliff_hex/pen/OJvpmLE)             | 
|    Leo Song #8278    |            [CodePen](https://codepen.io/sunnylaba/pen/MWVpmgN)             |
|      威爾#1694       |             [codePen](https://codepen.io/WILL_Wu/pen/LYdWWMR)              |
|     hungya#0773      |            [CodePen](https://codepen.io/hungya777/pen/KKoWWbJ)             |
|   Iris Huang#6727    |             [CodePen](https://codepen.io/ythuang/pen/RwMpVoM)              |
|       int#7518       |      [Codepen](https://codepen.io/intHuang/pen/vYRxmgR?editors=0110)       | 
|      群嘉#3943       |      [CodePend](https://codepen.io/efzdamnp-the-lessful/pen/qBormxP)       |
|     JarDar#6980      |            [codepen](https://codepen.io/jardarpen/pen/gOemWgd)             | 
|      Hsiu#8767       |             [codepen](https://codepen.io/amy-hsiu/pen/jOzBmVj)             |
|      溡月#2553       |          [CodePen](https://codepen.io/winterwinterpu/pen/yLKMMdd)          |
|      LINK#1933       |             [CodePen](https://codepen.io/miyayoe/pen/eYMvWqW)              | 
|     Tuhacrt#0008     |             [CodePen](https://codepen.io/Tuhacrt/pen/mdxWwPY)              |
|      阿翰 #1984      |            [codepen](https://codepen.io/JohnHan05/pen/JjLWJZw)             |
|     Melon #0380      |             [codepen](https://codepen.io/BalaFang/pen/zYWZzaL)             | 
|      Henry#7386      |              [Codepen](https://codepen.io/h1nr9/pen/LYdWLJv)               |
|      zera#6060       |            [codepen](https://codepen.io/zera-tseng/pen/bGvqRxg)            |
|      yuyu#6310       |             [codepen](https://codepen.io/yuyu0905/pen/GRxWvKq)             | 
|       QOO#8446       |       [Codepen](https://codepen.io/QOOQOOQ/pen/rNdymzL?editors=1100)       | 
|     黑白兔#0684      |[Codepen](https://codepen.io/johnny329/pen/WNzpEwd) |
|       威0#6919       |[Codepen](https://codepen.io/n0918679182/pen/rNdyzKE) |
|     Benson#6763      | [Codepen](https://codepen.io/kumashow/pen/bGvqryx)|
|     雷雷#7844     |[Codepen](https://codepen.io/lei-yi-jie/pen/LYdWjrN)  |
|  LHchien33#6232   | [Codepen](https://codepen.io/lin_chien/pen/JjLWrgL)  |
|    SASIMI#5099    | [Codepen](https://codepen.io/sashimi1327/pen/oNqzjBj)|
|      痴醉兔       |[Codepen](https://codepen.io/wei-nie/pen/BarWmPz)  |
|  suihsilan#9485   |[Codepen](https://codepen.io/suihsilan/pen/PoRpOLz)  |
|  我是泇吟 #5189   | [Codepen](https://codepen.io/kljuqbxs/pen/qBorxWq)    |
|   ajhappy#6488    |[Codepen](https://codepen.io/ajhappy5438/pen/KKoWQPY)|
|    鉦勝 #8333     |[[Codepen]](https://codepen.io/atckmax823/pen/MWVpQVK)|
|      Chi#7605    | [Codepen](https://codepen.io/YoChi84/pen/ZExerNL)   |
|      peter#0    |[Codepen](https://codepen.io/JIAN-RONG/pen/PoRpeBO?editors=1100)      |
|      RayChen#6088    | [Codepen](https://codepen.io/raychen1996/pen/gOemzVv)  |
|      leeli#6243    | [Codepen](https://codepen.io/leelilee/pen/JjLWvqX)      |
|    Fanglin#4054    |    [CodePen](https://codepen.io/flynn841028/pen/bGvqvYe) |
|    YU #0618    |    [CodePen](https://codepen.io/yoken_/pen/yLKMKJM)    |
|楓之聲#6945|[codepen](https://codepen.io/sshane258/pen/poLeKEM) |
|yu魚#1330   |  [CodePen](https://codepen.io/Yu_yu/pen/jOzBzpw)| 
|ssozr#4680|[codepen](https://codepen.io/ssozr/pen/WNzpKrr)|
|Pony#6778|[codepen](https://codepen.io/Pony0303/pen/gOemjvb)|
|Joyce#3790|[codepen](https://codepen.io/joycehuang/pen/eYMvVqv?editors=1100)|
| Jason1#2538 | [CodePen](https://codepen.io/jotwxezb-the-encoder/pen/KKoWxwQ) |
| 咻蹦#1526 | [CodePen](https://codepen.io/emmasyu/pen/KKoWBLy?editors=1100)|
| Mylène#2481 |[Codepen](https://codepen.io/hamajibashi/pen/jOzBvPY)|
|Shuo#1596 | [Codepen](https://codepen.io/chiangchungshuo/pen/mdxWzRx)|
|小白#2406|[Codepen](https://codepen.io/gracewhite/pen/qBorvRy)|
|jin.huang#4666|[Codepen](https://codepen.io/HJ7878/pen/RwMpmrj?editors=1100)|
|Amberhh#2465|[Codepen](https://codepen.io/Amberhh/pen/bGvqyYZ?editors=1100)|
|Arista#5802|[Codepen](https://codepen.io/arista-hsieh/pen/ZExedGL)|
|Ryan Chiang#6649|[Codepen](https://codepen.io/ryanchiang/pen/rNdyEjG)|
|紙飛機#1335|[Codepen](https://codepen.io/paperplanea/pen/abYJgKj)|
|mickey#8745|[Codepen](https://codepen.io/weizhetseng/pen/xxWqoyy)|
|Vera#5592|[Codepen](https://codepen.io/skvera/pen/ZExegpM)|
|Yuna Huang#2692|[Codepen](https://codepen.io/Yuna1002/pen/qBoreXB)|
|kevin6131 Huang#2692|[Codepen](https://codepen.io/kun8349/pen/NWYpQLM)|
| EmilyLin#0526 |[Codepen](https://codepen.io/c199615/pen/rNdmaJR)|
|Ron Liang#7277|[Codepen](https://codepen.io/ron-go/pen/bGvWNdW)|
|Van.CS|[Codepen](https://codepen.io/fbacojji-the-selector/pen/rNdmVPW)|
|toshow#5609|[CodePen](https://codepen.io/toshow/pen/poLPJYj)|
| Yuan962#5897 | [Codepen](https://codepen.io/Jasmine-Liao/pen/NWYjNxO)|
| IreneY #0086 |[Codepen](https://codepen.io/HalfPlannedJourney/pen/zYWwBGz)|
|鴨鴨#9822|[Codepen](https://codepen.io/qrvrqvxv-the-selector/pen/GRxmqLJ)|
|Sentiment#4883|[codepen](https://codepen.io/Sentiments/pen/QWmvERv)
|jeter#8014|[codepen](https://codepen.io/gi-tai-she/pen/GRxmyXW?editors=1100)
| 瑞瑞#4605 |[codepen](https://codepen.io/tsai-li-ting/pen/gOeWeLy)
| WEI#0797|[codepen](https://codepen.io/pen/)
| 狸貓#5863 | [Codepen](https://codepen.io/tanuki320/pen/BarRPej)|
| NeilLin#3009 | [Codepen](https://codepen.io/a0071421/pen/rNdmoYQ?editors=1100)|
|得源#8355|[CodePen](https://codepen.io/aglgvsie/pen/PoRmVvx)|
|bakiii|[Codepen](https://codepen.io/aki168/pen/rNdwMpZ)|
|GARBO#6659|[Codepen](https://codepen.io/garbo8130/pen/wvmegdL)|
|艾草#4830|[Codepen](https://codepen.io/jmkhsutp/pen/xxWrgrP)|
|Vian#7338|[Codepen](https://codepen.io/vianwu31/pen/ExEXoEG?editors=1100)|
|yuchenye#6119|[Codepen](https://codepen.io/yuchen/pen/YzaQaZv)|
|Tori#1248|[Codepen](https://codepen.io/FlyTori/pen/bGvRywL)|
|艾芮絲#6060|[Codepen](https://codepen.io/wangyingju/pen/NWYgVYB)|
|Nini Chen#5790|[Codepen](https://codepen.io/ninistyle/pen/zYWzVWw)|
|肉魚#2149|[Codepen](https://codepen.io/zoechen13/pen/NWYgZZG)|
|hua#9099|[Codepen](https://codepen.io/LHua/pen/yLKoOqw)|
|Deborah#0033|[Codepen](https://codepen.io/deborah-tsai/pen/xxWLmKp)|
|阿蘇#8351|[Codepen](https://codepen.io/susu3131/pen/xxWLmrz)|
| Fang #4680 | [Codepen](https://codepen.io/std95174/pen/RwMZmrr?editors=1100)|
|熊二#3824|[CodePen](https://codepen.io/BeckLai/pen/yLKzLam)|
| 柏PO #5617| [CodePen](https://codepen.io/apo_1798/pen/ZExXGMP)|
| kancheng#3915| [CodePen](https://codepen.io/kancheng/pen/qBoVmNg)|
| YaWen #2752| [CodePen](https://codepen.io/yuwendy/pen/oNqodGq)|
| Carrie #2750| [CodePen](https://codepen.io/carrie-wang/pen/LYdOKMx)|
| mei#8421| [CodePen](https://codepen.io/Shila-Chen/pen/JjLMjGP)|
| Susie(軒)#6181| [CodePen](https://codepen.io/Codeleaf/pen/rNdpOPN)|
| ROKA #4051| [CodePen](https://codepen.io/chengchiaoyi/pen/gOeozwK?editors=1100)|
| rueee #7997| [CodePen](https://codepen.io/Jull-C/pen/qBoxrQX)|
| Jumpye#8601| [CodePen](https://codepen.io/Jumpye/pen/VwXQRRa?editors=1100)|
|sophiee#7015|[codepen](https://codepen.io/sophiee2727/pen/XWEZLww)
|Manson許#2295|[codepen](https://codepen.io/oupbzfxq-the-scripter/pen/ExEEKob)
|鎔瑄#8578|[Codepen](https://codepen.io/barbarayou/pen/LYddmPE) |
|Gui#9571|[CodePen](https://codepen.io/guitimliu/pen/NWYBNWY)|
|Bonnie邦妮#7529|[CodePen](https://codepen.io/Calista316/pen/QWmJpaj)|
|Rena#6249|[CodePen](https://codepen.io/aureate0116/pen/abYQqwQ)|
|NathanJames#8120|[CodePen](https://codepen.io/ufo060204/pen/OJvavWz)|
|RuoAn#7124|[CodePen](https://codepen.io/LiauRuoAn/pen/jOzQXBO)|
|skypassion5000#4151|[CodePen](https://codepen.io/skypassion5000/pen/YzadjQW?editors=1100)|
|KT Hsieh#2861|[CodePen](https://codepen.io/KTHsieh/pen/XWqbVKJ)