### 認識 CSS 語法 background-image

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

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

.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**

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

什麼都看不到XD

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

     background-position: center;


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

> auto ｜ contain ｜ cover

    background-size: contain;


background-size 改用 cover 查看兩者的差別。
> contain 是在不超過原圖的大小前提下等比縮小
> cover 是等比例縮放，讓圖片可以蓋滿元素寬高。

    background-size: cover;


* **background-repeat**
背景圖片重複的問題，為了不讓他重複所以要使用 `background-repeat` 設定

> repeat(預設值)｜ repeat-x ｜ repeat-y ｜ no-repeat
>

    background-repeat: no-repeat;


**完整程式碼**

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

.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 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答： -->

回報區
---

|#| Discord | CodePen / 答案 |
|:-:|:-----------------:|:--------------------------------------------------:|
| 01 |Berlin|[CodePen](https://codepen.io/3qberlin/pen/KKrRpBm)|
| 02 | AYA | [Codepen](https://codepen.io/NoNameNote/full/RwqyPBX) |
| 03 | ann6212 | [Codepen](https://codepen.io/yqmegupa-the-styleful/pen/KKrRpxm?editors=1100) |
| 04 | eric0529 |[CodePen](https://codepen.io/delichaomoon/pen/ExOLjOp)|
| 05 | shawey.1a2b | [Codepen](https://codepen.io/Shawey/pen/NWEMqLR) |
|06|Moreene|[CodePen](https://codepen.io/Moreene/pen/QWJrbZp)|
| 07 | Eden.C |[Codepen](https://codepen.io/iseden/pen/bGQMdje)|
| 08 | 銀光菇 | [Codepen](https://codepen.io/genesynthesis/pen/bGQMdxe) |
| 09 | ryan.chou | [Codepen](https://codepen.io/csw8524/pen/LYXmVgq)|
| 10 | Calvin | [Codepen](https://codepen.io/CalvinChang/pen/gOQzpQp)|
| 11 | awei | [Codepen](https://codepen.io/hong-wei/pen/vYQjOQo?editors=1100)|
| 12 | cest_jessie | [Codepen](https://codepen.io/itsjessiechen/pen/vYQjOaq)|
| 13 | lychee_kk | [Codepen](https://codepen.io/kakakala/pen/poQVJYW)|
| 14 | bf_tsai | [Codepen](https://codepen.io/BF-Tsai/pen/bGQMdJB)|
| 15 | Morning | [Codepen](https://codepen.io/sxzjnkxs-the-styleful/pen/oNQdXRR?editors=1100)|
| 16 | kuanju27 | [Codepen](https://codepen.io/Eero-Chiao/pen/wvQjaVo)|
| 17 | stevenchang421 | [Codepen](https://codepen.io/vwtrpqmm/pen/OJaZVqN) |
| 18 | SmallP | [Codepen](https://codepen.io/smallp/pen/YzRLXoK) |
| 19 | shcopy | [Codepen](https://codepen.io/shcopy/pen/YzRLyPz)|
| 20 | 泊岸#3466 | [Codepen](https://codepen.io/qoq77416416/pen/RwqyPmN?editors=1100)|
| 21 | Rochel#4754 | [Codepen](https://codepen.io/rochelwang1205/pen/ExOLVYO) |
| 22 | Yu | [Codepen](https://codepen.io/yuch3n_chen/pen/VwVxLNo?editors=1100)|
| 23 | m_m | [Codepen](https://codepen.io/minnn7716/pen/poQVjPK)|
| 24 | billy_ti | [Codepen](https://codepen.io/Ti-Show/pen/dyQeYRo)|
| 25 | townyuan | [Codepen](https://codepen.io/townyuan/pen/jOQxbVZ)|
| 26 | .icesam | [Codepen](https://codepen.io/icesam/pen/abQGvLg)|
| 27 | .rainielin | [Codepen](https://codepen.io/Yunchian-Lin/pen/MWzGavq)|
| 28 | ovo.yun | [Codepen](https://codepen.io/yun-the-scripter/pen/ZEmobyq)|
| 29 | SKey#9905 | [Codepen](https://codepen.io/Dale-Chien/pen/YzRLyNy)|
| 30 | dodo_6666 | [Codepen](https://codepen.io/MissDouble/pen/rNQvOdR)|
| 31 | meowmeow | [Codepen](https://codepen.io/snow1224/pen/zYMjvLV)|
| 32 | Brian#7046 | [Codepen](https://codepen.io/PochienTsai/pen/GRwdoRO)|
| 33 | jacky7035 | [Codepen](https://codepen.io/adens123/pen/PoxeZqR)|
| 34 | Martin | [Codepen](https://codepen.io/markyourpage/pen/rNQvxLa)|
| 35 | pinyi_9 | [Codepen](https://codepen.io/Wpypy/pen/YzRLwGx)|
| 36 | 辣椒 | [Codepen](https://codepen.io/chilichen118/pen/dyQeGvR) |
| 37 | ivy999 | [Codepen](https://codepen.io/ivy999/pen/gOQzPxK) |
| 38 | 小夏 | [Codepen](https://codepen.io/michaelhsia/pen/LYXmGeL?editors=1100)|
| 39 | Paul#7426| [Codepen](https://codepen.io/paul-1997/pen/oNQdboe)|
| 40 | Tina02#2691 | [Codepen](https://codepen.io/chjitlox-the-bashful/pen/wvQjMxO?editors=1100)|
| 41 | 依依 | [Codepen](https://codepen.io/Rita-Yang/pen/QWJryxe?editors=1100)|
| 42 | ci_ling | [Codepen](https://codepen.io/vseznpoh-the-flexboxer/pen/vYQjLQr)|
| 43 | Ting.66 | [Codepen](https://codepen.io/Ting66/pen/jOQxWZg?editors=1100)|
| 44 | Cura | [Codepen](https://codepen.io/curalin/pen/ZEmoQgp)|
| 45 | Aritan#1931 | [Codepen](https://codepen.io/Aritan/pen/abQGNVG)|
| 46 | Atsushi#6888 | [Codepen](https://codepen.io/atsushi-amuro/pen/ExOLKmQ?editors=1100)|
| 47 | Uli | [Codepen](https://codepen.io/uli1313/pen/ExOLKxv)|
| 48 | xuan#0808 | [Codepen](https://codepen.io/xuan0915/details/WNYJwVj)|
| 49 | yuyuyu#1330 | [Codepen](https://codepen.io/yuyu1215/pen/XWyqKmx) |
| 50 | .manmanlai | [Codepen](https://codepen.io/kikiyang/pen/WNYJrOm?editors=1100) |
| 51 | ming0712 | [Codepen](https://codepen.io/StevenHuang/pen/wvQjWmP) |
| 52 | hannahTW | [Codepen](https://codepen.io/hangineer/pen/eYQrZar)|
| 53 | hao2485 | [Codepen](https://codepen.io/Seanfeb16/pen/vYQjKom)|
| 54 | Vic_Liou | [Codepen](https://codepen.io/allenliou-java/pen/QWJrKqP)|
| 55 | 狸貓 | [Codepen](https://codepen.io/tanuki320/pen/poQVEKo)|
| 56 | 墨墨#4571 | [Codepen](https://codepen.io/momof2e/pen/GRwdjPY) |
| 57 | ROGER | [Codepen](https://codepen.io/jxyrmcxm-the-scripter/pen/bGQMBNb)|
| 58 | adele6199 | [Codepen](https://codepen.io/codepen-io-winnie/pen/BaGxQVo?editors=1100)|
| 59 | 阿賀#3700 | [Codepen](https://codepen.io/sungho/pen/eYQrBre)|
| 60 | MKL |[Codepen](https://codepen.io/Code-My/pen/jOQxVYV)|
| 61 | ss30304#9213 | [Codepen](https://codepen.io/ss30304/pen/eYQrBoM)|
| 62 | yunhsinnnnnnn | [Codepen](https://codepen.io/yun___hsin/pen/BaGxpxw)|
| 63 | fanglin.y | [Codepen](https://codepen.io/flynn841028/pen/oNQdLLv) |
| 64 | yuling#1634 | [Codepen](https://codepen.io/igzdflpu/pen/wvQjgbm)|
| 65 | Long| [Codepen](https://codepen.io/Loonng/pen/wvQjJEO)|
| 66 | 出事了阿伯#9923| [Codepen](https://codepen.io/BradpittLai/pen/mdQqpEY)|
| 67 | yu.t_liu| [Codepen](https://codepen.io/YuT200053/pen/VwVxbgO)|
| 68 | Marvin| [Codepen](https://codepen.io/chi-Wu/pen/rNQvmpY)|
| 69 | peggydbc1217| [Codepen](https://codepen.io/peggydbc1217/pen/yLQjXLp)|
| 70 | rjjq | [Codepen](https://codepen.io/rjjq/pen/YzRLQWP)|
| 71 | 歐陽龍龍#1061 | [Codepen](https://codepen.io/dizzydog-rgb/pen/BaGxZJZ)|
| 72 | PayRoom | [Codepen](https://codepen.io/water38198/pen/MWzGoQP)|
| 73 | Randy | [Codepen](https://codepen.io/landy510/pen/wvQjeZy?editors=1100)|
| 74 | runweiting | [Codepen](https://codepen.io/weiting14/pen/Poxejdj)|
| 75 | hance__kao | [Codepen](https://codepen.io/HanceKao/pen/mdQLVMx?editors=1100)|
| 76 | zona_0.0 | [Codepen](https://codepen.io/Zona-Chen/pen/bGQMoze)|
| 77 | Tami | [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/qBQYVOw) |
| 78 | Cosmos#9210 | [Codepen](https://codepen.io/violet7755/pen/KKrRyqo)|
| 79 | johnchien | [Codepen](https://codepen.io/glqwazid-the-selector/pen/ExOLboJ)|
| 80 | Lesly1279 | [Codepen](https://codepen.io/LeslyChang/pen/MWzGGaR)|
| 81 | soniawu | [Codepen](https://codepen.io/YUJOU/pen/VwVxdeB?editors=1100)|
| 82 | Amelia | [Codepen](https://codepen.io/Amelia-chin/pen/vYQjrVw) |
| 83 | Hana | [Codepen](https://codepen.io/hananalin/pen/QWJrgQm) |
| 84 | Robert.H | [Codepen](https://codepen.io/Robert1205/pen/rNQvrzQ)|
| 85 | markchen_ | [Codepen](https://codepen.io/Mark-JJchen/pen/vYQjajG)|
| 86 | MaciHuang#8798 | [Codepen](https://codepen.io/macy1215/pen/OJaZoPz)|
| 87 | shuuu | [Codepen](https://codepen.io/afjrvjzl-the-bashful/pen/vYQjVgQ)|
| 88 | andersonshen | [Codepen](https://codepen.io/luxyenni-the-bold/pen/GRwdwKg)|
| 89 | kimlemon0720 | [Codepen](https://codepen.io/znohmess-the-builder/pen/zYMjMBm) |
| 90 | 舜仁 | [Codepen](https://codepen.io/randomno/pen/OJaZrxE) |
| 91 | zhu.lin | [Codepen](https://codepen.io/codepenplayer/pen/XWyqozm)|
| 92 | Lianne._. | [Codepen](https://codepen.io/Elaina-L/pen/PoxeXzQ?editors=1100)|
| 93 | Johnson3669 | [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/gOQzyxe)|
| 94 | WA | [Codepen](https://codepen.io/ldddl/pen/rNQvgvG)|
| 95 | sinsaki | [Codepen](https://codepen.io/a8322342/pen/ZEmodMm)|
| 96 | wind | [Codepen](https://codepen.io/wind7y/pen/XWyqLoQ)|
| 97 | murphy1665 | [Codepen](https://codepen.io/icephy/pen/WNYyeaw)|
| 98 | Mylène | [Codepen](https://codepen.io/hamajibashi/pen/xxQzOpe)|
| 99 | homer | [Codepen](https://codepen.io/Buckhorn/pen/abQKmBO)|
| 100 | NathanJames#8120 | [Codepen](https://codepen.io/ufo060204/pen/JjeZRxW)|
| 101 | _jim0.0_ | [Codepen](https://codepen.io/asiahedh-the-encoder/pen/VwVdPXY?editors=1100)|
| 102| 阿富#0389 | [Codepen](https://codepen.io/spring40747/pen/mdQKRvr)|
| 103 | marskuo | [Codepen](https://codepen.io/MarsKuo/pen/mdQKWem)|
| 104 | dong2328 | [Codepen](https://codepen.io/htamlkdz-the-encoder/pen/MWzXJNz?editors=1100)|
| 105 | .dtou | [Codepen](https://codepen.io/conlyvrg-the-reactor/pen/YzRvZRE)|
| 106 | yuan2781 | [Codepen](https://codepen.io/ismebir/pen/bGQKRPY)|
| 107 | ning_bobo | [Codepen](https://codepen.io/ninghsu/pen/dyQKwGG?editors=1100)|
| 108 | stoos_1369 |[Codepen](https://codepen.io/Stooss/pen/PoxaXpJ)|
| 109 | Renee Wang#1437 | [Codepen](https://codepen.io/RENEE-WANG-the-looper/pen/KKreJZd) |
| 110 | hebin. | [codepen](https://codepen.io/landyhsiao776/pen/QWJxYeE)|
| 111 | FanJJ | [codepen](https://codepen.io/yfchenn/pen/mdQjJbx)|
| 112 | liam9930 | [Codepen](https://codepen.io/jgnjfvvt-the-lessful/pen/abQjYxX)|
| 113 | .ziton | [Codepen](https://codepen.io/ztion/pen/GRwBdKq?editors=1100) |
| 114 | peggy3160 | [Codepen](https://codepen.io/peggylai/pen/mdQjjOZ)|
| 115 | cyrus_li | [Codepen](https://codepen.io/likahang/pen/bGQjZPq)|
| 116 | mm_ieat | [Codepen](https://codepen.io/MINN3/pen/gOQjVbM)|
| 117 | Kimi #9564 | [Codepen](https://codepen.io/kimihu91/pen/GRwyVVR)|
| 118 | Eileen#6454 | [Codepen](https://codepen.io/Eileen-io/pen/LYXgEPq)|
| 119 | celia9182 | [Codepen](https://codepen.io/celia01/pen/OJaBPrg)|
| 120 | EY | [Codepen](https://codepen.io/pen/)|
| 121 | jhen_ye | [Codepen](https://codepen.io/su-jhen/pen/rNQqLMj)|
| 123 | yuchou#5749 | [Codepen](https://codepen.io/yu-chou/pen/rNQqZbo)|
| 124 | .zack_P | [Codepen](https://codepen.io/Designer-PH/pen/mdQQOgp?editors=1100)|
| 125 | 圈圈 | [Codepen](https://codepen.io/wjejfczn-the-bold/pen/GRwwOae?editors=1100)|
| 126 | swalok47716#7332 | [Codepen](https://codepen.io/swalok/pen/zYMMbOG)|
| 127 | patrickpie | [Codepen](https://codepen.io/patrickpie/pen/gOQZQMo)|
| 128 | RX00#5351 | [Codepen](https://codepen.io/llqzknqv-the-styleful/pen/dyQaobL)|
| 129 | vivianlu_ | [Codepen](https://codepen.io/viviannlu/pen/dyQrMzL) |
| 130 | 柚子#3958 | [Codepen](https://codepen.io/as6625998/pen/PoxLBvR) |
| 131 | santu0868 | [Codepen](https://codepen.io/HatsumiSan/pen/rNQRXEy) |
| 132 | 阿維#2569 | [Codepen](https://codepen.io/iijojpli-the-looper/pen/OJaYmLr?editors=1100) |
| 133 | JimmyChang | [Codepen](https://codepen.io/JimmyChangWenChi/pen/oNQKWgY) |
|134|KC_8685|[Codepen](https://codepen.io/cathy7411/pen/RwqXqVv)|
|135|ChrisSQR|[Codepen](https://codepen.io/ChrisSQR/pen/abPJMBd)|
|136|楓|[Codepen](https://codepen.io/maplestartend/pen/NWJWZdY)|

<!-- - 快速複製格式：

| 0 | user | [Codepen]()|

-->