# 🏅 Day 17 - background-image

### 認識 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 / 答案|
|:----:|:----:|:----:|
| 1 | han | [Codepen](https://codepen.io/iamHanCheng/pen/ZEdbXvy?editors=1100) |
| 2 | yoishere | [Codepen](https://codepen.io/yoishere/pen/QWXjqON) |
| 3 | NocabWang(培根) | [Codepen](https://codepen.io/PeihanWang/pen/GRbpMdV) |
| 4 | fendy1223 | [Codepen](https://codepen.io/fendy1223/pen/abgvLQK) |
| 5 | Sammy | [Codepen](https://codepen.io/fsczdlla-the-bold/pen/OJeyxrV) |
| 6 | Kerwin | [Codepen](https://codepen.io/kerwin/pen/YzoyraB) |
| 7 | 泊岸 | [Codepen](https://codepen.io/qoq77416416/pen/yLdYzGX) |
|8|Hailey|[Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/Yzoyrdb)|
| 9 | hsiu8767 | [Codepen](https://codepen.io/hsiu8767/pen/wvLKrRM) |
| 10 | tim | [Codepen](https://codepen.io/jskrtivy-the-animator/pen/abgoOme) |
| 11 | Kiwi | [Codepen](https://codepen.io/kiwi1113/pen/NWZGwPd) |
| 12 | kawa | [Codepen](https://codepen.io/z83xji6/pen/YzoyEzm) |
| 13 | TONY | [Codepen](https://codepen.io/Ming-Tung-Chien/pen/PorPOyj) |
| 14 | david1819 | [Codepen](https://codepen.io/David-Lin-the-vuer/pen/xxowPmK)|
| 15 | Jaianee | [Codepen](https://codepen.io/Jainee0110/pen/yLdYpLZ) |
| 16 | Mike | [Codepen](https://codepen.io/mike2049/pen/poXjpvq) |
| 17 | Theodore0716 | [Codepen](https://codepen.io/GustavoFringgg/pen/qBzOpEb?editors=1100) |
| 18 | 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/oNrjpwZ) |
| 19 | GAVI | [Codepen](https://codepen.io/qbafldcv-the-scripter/pen/jOjbYjO) |
| 20 | 俊 | [Codepen](https://codepen.io/jun12079/pen/yLdYvZX) |
| 21 | 黛西 | [Codepen](https://codepen.io/ChiashengLin/pen/JjQYvXG) |
| 22 | emmayo | [Codepen](https://codepen.io/emmayo/pen/bGPVMgx) |
| 23 | ninii傳教士 | [Codepen](https://codepen.io/niiniiii/pen/LYKpmXj?editors=1100) |
| 24 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/wvLKjQN) |
| 25 | brucelee0629 | [Codepen](https://codepen.io/xxhdklwi-the-decoder/pen/poXjVBv) |
| 26 | KUN. | [Codepen](https://codepen.io/barry91205/pen/rNEOKpz) |
| 27 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/qBzOKoy) |
| 28 | Dolce_墨 | [Codepen](https://codepen.io/DolceTseng1026/pen/oNrjMNO) |
| 29 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/vYqNaBo) |
| 30 | jimmy.0706 | [Codepen](https://codepen.io/JimmyMao/pen/qBzOyPz) |
| 31 | anderson666 | [Codepen](https://codepen.io/goodmanbuild/pen/mdZeGoK) |
| 32 | 小咪 | [Codepen](https://codepen.io/iloveu3000x/pen/RwzWYYM) |
| 33 | MY | [Codepen](https://codepen.io/ahmomoz/pen/MWMaPye) |
| 33 | Sinyi | [Codepen](https://codepen.io/sinyiii/pen/ExBVdJR) |
| 34 | jerry_66983 | [Codepen](https://codepen.io/Barry-C/pen/yLdYQvE?editors=1100) |
| 35 | chris | [Codepen](https://codepen.io/chrischen666/pen/mdZeQQO) |
| 36 | Jack | [Codepen](https://codepen.io/kxbhixte-the-sasster/pen/WNqQLJP) |
| 37 | KevinHuang | [Codepen](https://codepen.io/qw-huang/pen/OJeyrzE) |
| 38 | lunlun0514 | [Codepen](https://codepen.io/f5badapple/pen/vYqNvap) |
| 39 | gracechiang | [Codepen](https://codepen.io/gracechiang225/pen/qBzOLgj) |
| 40 | OSN |[Codepen](https://codepen.io/osncodepen/pen/bGPVOjO)|
| 41 | Arvin |[Codepen](https://codepen.io/arvinyang1925/pen/gONaqvN)|
| 42 | hao jing |[Codepen](https://codepen.io/hjxu/pen/OJeyvOp)|
| 43 | Yunya | [Codepen](https://codepen.io/cookie1515/pen/eYwJmNo)|
| 44 | 皮皮 | [Codepen](https://codepen.io/rainbow-the-reactor/pen/vYqLEMd)|
| 45 | ya_meow |[Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/zYVrxbB)|
| 46 | Aura Tao | [Codepen](https://codepen.io/AURATAO/pen/ZEdQYgb) |
| 47 | xiang | [Codepen](https://codepen.io/XIANG-XIANG/pen/eYwJNZd) |
| 48 | Amy(咂摳) | [Codepen](https://codepen.io/nnxucgmc-the-builder/pen/RwzrPoe) |
| 49 | Chuang | [Codepen](https://codepen.io/uidoytjq-the-solid/pen/dyBGoOe?editors=1100) |
| 50 | Jim | [Codepen](https://codepen.io/JimChou/pen/GRboZYa?editors=1100) |
| 51 | Anna |[Codeoen](https://codepen.io/Anna-Teng/pen/JjQGXga)|
| 52 | xcx100 | [Codepen](https://codepen.io/c13026/pen/ZEdQOPm) |
| 53 | macihuang | [Codepen](https://codepen.io/macy1215/pen/OJaZoPz) |
| 54 | zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/qBzbaRb)|
| 55 | yaoling.liang | [Codepen](https://codepen.io/Yao-Ling-L-/pen/BagjLrV)|
| 56 | Yolanda | [Codepen](https://codepen.io/vcscqrtz-the-animator/pen/MWMKjNY)|
| 57 | fan_fan | [Codepen](https://codepen.io/fan1102/pen/OJeMbbq) |
| 58 | mindful7755 | [Codepen](https://codepen.io/andawu/pen/PorZbRv) |
| 59 | 超立方體Andy |[Codepen](https://codepen.io/Andy-Yu-the-scripter/pen/VwJezor)|
| 61 | Kim |[Codepen](https://codepen.io/kim0101__/pen/OJeMxVa?editors=1100)|
| 62 | PoWei |[Codepen](https://codepen.io/Po-Wei-Lai/pen/dyBGVOd)|
| 63 | Noelle | [Codepen](https://codepen.io/NoelleKH/pen/vYqLrbb) |
| 64 | 咖 | [Codepen](https://codepen.io/daru-Ga/pen/KKjVVWb) |
| 65 | 邵 |[Codepne](https://codepen.io/ukscrlno-the-typescripter/pen/OJeMegM)|
| 66 | neo |[Codepne](https://codepen.io/Neo-oo/pen/rNExEvK)|
| 67 | 陳小廷 | [Codepen](https://codepen.io/ting1124/pen/xxoVxGj) |
| 68 | wind | [Codepen](https://codepen.io/wind7y/pen/LYKNVjO) |
| 69 | glen_69515|[Codepen](https://codepen.io/glenyaochih/pen/eYwZzMM)|
| 70| Lobinda |[Codepen](https://codepen.io/Lobinda/pen/QWXyXav)|
| 71 | n913239 | [Codepen](https://codepen.io/n913239/pen/zYVqyJg) |
| 72 | Steven1220 | [Codepen](https://codepen.io/Steven1220/pen/dyBMawm) |
| 73 | Enn | [Codepen](https://codepen.io/enntang/pen/GRbqKZQ) |
| 74 | harrytsai_ht | [Codepen](https://codepen.io/sffkurga-the-solid/pen/bGPebOy) |
| 75 | EdHuang | [Codepen](https://codepen.io/yide1986/pen/gONMwqx) |
| 76 | jasonlin | [Codepen](https://codepen.io/gfswkraq-the-reactor/pen/NWZryvE)|
| 77 | 嚼勁先生 | [Codepen](https://codepen.io/James520284/pen/XWLKqxQ) |
| 78 | ho_yc | [Codepen](https://codepen.io/Ho_HYC/pen/yLdJmEE) |
| 79 | 地瓜 | [Codepen](https://codepen.io/huangtzuchin/pen/JjQRjwB) |
| 80 | skyderry | [Codepen](https://codepen.io/hvvjvkva-the-sasster/pen/vYqXNVP?editors=1100) |
| 81 | 雪粒 | [Codepen](https://codepen.io/bzykdfhw-the-bashful/pen/poXEyLm?editors=1100) |
| 82 | Joanne hu | [Codepen](https://codepen.io/nelbabkv-the-flexboxer/pen/PorGEvp) |
| 83 | 610 | [Codepen](https://codepen.io/YI-LING-LIU/pen/YzopBXP) |
| 84 | eddiesun0526 | [Codepen](https://codepen.io/Eddie0526/pen/XWLNQma)|
| 85 | Chieh | [Codepen](https://codepen.io/Chieh_/pen/qBzqzKX)|
| 86 | iamcan | [Codepen](https://codepen.io/uhnxswdq-the-typescripter/pen/dyBOxgL?editors=1100)|
| 87 | Antonio | [Codepen](https://codepen.io/gwhvusel-the-builder/pen/BagWbxx)|
| 88 | Toung | [Codepen](https://codepen.io/Toung/pen/abgWYrv) |
| 89 | 小翎 | [Codepen](https://codepen.io/debbielin/pen/eYwWXYj?editors=1100) |
| 90 | qet1717 | [Codepen](https://codepen.io/gwteqexi-the-bold/pen/gONRoNQ) |
| 91 | Emma | [Codepen](https://codepen.io/Emma0919/pen/JjQyGYd) |
| 92 | Judy | [Codepen](https://codepen.io/yangchi/pen/jOjaKNe) |
| 93 | 野鴿 | [Codepen](https://codepen.io/HoshinoSyouta/pen/QWXawVQ) |
| 94 | ji3di | [Codepen](https://codepen.io/jwuuhtxh-the-builder/pen/RwzMmdo) |
| 94 | zen | [Codepen](https://codepen.io/zen742937/pen/jOjxpPK) |
| 95 | tung | [Codepen](https://codepen.io/ru-ching/pen/vYqaZpG) |
| 96 | 深海 | [Codepen](https://codepen.io/KAI-SHIN-the-animator/pen/gONQMVP) |
| 97 | KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/NWZmMYP) |
| 98 | Lotte | [Codepen](https://codepen.io/hmkdoxuj-the-decoder/pen/abgrLLa) |
| 99 | Angela_la | [Codepen](https://codepen.io/Angela-the-builder/pen/jOgaqRL?editors=1100) |
<!--
| No | Discord | [Codepen]() |
-->