# 🏅 Day 14 - background-image

今天要來練習 CSS 的 background-image 屬性，該屬性能夠為網頁元素設定背景圖片，增進畫面美感。

### 常用屬性
- background-image: 用來設定元素的背景圖片。最常見的用法是 url()，後面接圖片的路徑。
範例：`background-image: url('images/your-image.png');`
- background-repeat: 控制背景圖片是否重複。
no-repeat：圖片只顯示一次。
repeat：圖片在 X 和 Y 軸上重複 (預設值)。
repeat-x：圖片只在 X 軸上重複。
repeat-y：圖片只在 Y 軸上重複。
- background-position: 設定背景圖片的位置。
可以使用關鍵字 (如 center, top right) 或座標值 (如 50% 50%, 10px 20px)。
- background-size: 設定背景圖片的大小。
cover：圖片會盡可能地縮放以覆蓋整個背景區域，但可能會裁剪圖片一部分。
contain：圖片會盡可能地縮放以完全顯示在背景區域內，但可能會留下空白。

### 題目
下方有提供部分程式碼，請試著在「...」的地方加上 background-image 相關屬性完成剩下的版型。
圖片網址：https://fastly.picsum.photos/id/544/1200/800.jpg?hmac=raCi8ewNN0Qkwt9JFB2ddnzyKfo6KbPFtUFNQ3ujKxA
圖片來源：[Lorem Picsum 假圖產生器](https://picsum.photos/)

HTML

<div class="hero-section">
  <h1>歡迎來到我的網站</h1>
  <p>探索更多精彩內容</p>
</div>

CSS

.hero-section {
  height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  /* 在這裡加上 background-image 相關屬性，讓它滿版顯示一張背景圖 */
  ...
}

完成圖如下：

## 回報流程

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

<!-- 解答：
https://codepen.io/fhljksmg-the-styleful/pen/emNZYQy
-->

回報區
---

|#|Discord|CodePen / 答案|
|:----:|:----:|:----:|
| 1 | Nooooora | [Codepen](https://codepen.io/Nora-Ch/pen/LEVoqGe) |
|2|Saika|[Codepen](https://codepen.io/saika4501/pen/WbvBPGN)|
| 3 | jchunnn |[Codepen](https://codepen.io/jchunnn/pen/emNaxGv)|
| 4 | 牛奶嘎 |[Codepen](https://codepen.io/Joyce-Niu/pen/NPqVopW) |
| 5 | 西娜 |[Codepen](https://codepen.io/Sheena-the-encoder/pen/myJYvpo) |
| 6 | Katie |[Codepen](https://codepen.io/Katiekatiehsu/pen/dPoEaKg?editors=1100) |
| 7 | Jerome |[Codepen](https://codepen.io/qsc002163/pen/dPoEaQw) |
| 8 | 孟 |[Codepen](https://codepen.io/Mengru0503/pen/zxGQeVj) |
| 9 | 那個貓貓 |[Codepen](https://codepen.io/zorakao/pen/QwbRYPG) |
| 10 | Tetsu |[Codepen](https://codepen.io/ttgchang/pen/qEdGvWQ) |
| 11 | NAOJUN |[Codepen](https://codepen.io/NAOJUN/pen/WbvBmvR) |
| 12 | Joseph_Kyuu |[Codepen](https://codepen.io/zrzfastd-the-reactor/pen/PwqvLbN)
| 13 | 登登登 |[Codepen](https://codepen.io/Duncanin/pen/zxGQbNm)
| 14 | Jenna |[Codepen](https://codepen.io/abiscc14/pen/zxGQbwm) |
| 15 | ja4071 |[Codepen](https://codepen.io/SHAO-L/pen/ByNebwp)|
| 16 | JiaMori |[Codepen](https://codepen.io/jiamori/pen/XJbwQeJ) |
| 17 | Calvin |[Codepen](https://codepen.io/CalvinChang/pen/XJbwQyX) |
| 18 | pastor |[Codepen](https://codepen.io/peter_hung/pen/RNPmOBx) |
| 19 | 老屠 |[Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/PwqvgjQ) |
| 20 | RUDY |[Codepen](https://codepen.io/Rudy-crw/pen/PwqvvZV?editors=1100) |
| 21 | Chia__ |[Codepen](https://codepen.io/Chia-the-encoder/pen/yyNWZQM) |
| 22 | Rogan |[Codepen](https://codepen.io/RoganHsu/pen/MYwdMaO) |
| 23 | 柔術小子 |[Codepen](https://codepen.io/Li-Lee-Everything-is-PM/pen/xbGNeMg) |
| 24 | 燕 |[Codepen](https://codepen.io/keyrtlij-the-reactor/pen/pvJmXQK) |
| 25 | Kiku |[Codepen](https://codepen.io/Kiku0110/pen/emNawox) |
| 26 | Hao |[Codepen](https://codepen.io/Howell/pen/KwpLOzr) |
| 27 | 小懿 |[Codepen](https://codepen.io/YT-the-vuer/pen/dPoEagQ) |
| 28 | cks40660 |[Codepen](https://codepen.io/CKS40660/pen/ZYGdEpr) |
| 29 | Fan |[Codepen](https://codepen.io/btsihioy-the-reactor/pen/YPXoPqp) |
| 30 | Chris Wang |[Codepen](https://codepen.io/Wang-Chris/pen/emNwNNZ) |
| 31 | Eagle Huang |[Codepen](https://codepen.io/YuCi/pen/vEOqOGr) |
| 32 | kashiwatei |[Codepen](https://codepen.io/kashiwatei/pen/WbvqvwV) |
| 33 | 地瓜 |[Codepen](https://codepen.io/ChippyYU/pen/gbpNaOO) |
| 34 | An |[Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/MYwMabr) |
| 35 | 7Lun |[Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/EajBVbG) |
| 36 | CBK |[Codepen](https://codepen.io/BK-C-the-styleful/pen/gbpNPwG) |
| 37 | Sid |[Codepen](https://codepen.io/monkeybear721/pen/VYLJpxb) |
| 38 | Sam.S.T.Y | [CodePen](https://codepen.io/Sam-Yang-the-animator/pen/gbpNRrb)
| 39 | Elvina |[Codepen](https://codepen.io/Elvina-the-selector/pen/wBaLrOB?editors=1100) |
| 40 | 随縁 |[Codepen](https://codepen.io/anki0072011/pen/XJbLeQz) |
| 41 | Yan* |[Codepen](https://codepen.io/Yan-L/pen/jEPjaBm) |
| 42 | Evelyn |[Codepen](https://codepen.io/ewdyvnmp-the-typescripter/pen/jEPjaym) |
| 43 | Geno Chen |[Codepen](https://codepen.io/kai-chen-the-sans/pen/raVEdJr) |
| 44 | 社子畢卡索 |[Codepen](https://codepen.io/pen?template=bNdPKVZ) |
| 45 | NGNLzenos |[Codepen](https://codepen.io/xmijbzdb-the-animator/pen/wBaLNvQ) |
| 46 | PK |[Codepen](https://codepen.io/Percy-Ku/pen/XJbLwxR) |
| 47 | 禹成林 |[Codepen](https://codepen.io/useirin/pen/yyNddeb) |
| 48 | YUCCC |[Codepen](https://codepen.io/taroooo/pen/jEPgMjd) |
| 49 | 平平 |[Codepen](https://codepen.io/ypinpin/pen/LEVwyzz) |
| 50 | kate_bearchou |[Codepen](https://codepen.io/ydzfqmuh-the-selector/pen/gbpVvoB) |
| 51 | Min |[Codepen](https://codepen.io/cvqevoxk-the-decoder/pen/jEPgzbq) |
| 52 | Antonio |[Codepen](https://codepen.io/gwhvusel-the-builder/pen/ZYGgKdL) |
| 53 | Celia |[Codepen](https://codepen.io/Cindy-Ho/pen/azOePmx) |
| 54 | Leonard |[Codepen](https://codepen.io/hyyfjqra-the-sans/pen/WbQejzm) |
| 55 | Doreen翠翠翠 |[Codepen](https://codepen.io/cuei-sian-Wang/pen/LEpYREM?editors=1100) |
| 56 | Gloria |[Codepen](https://codepen.io/ilztzykz-the-decoder/pen/LEpYRGq?editors=1100) |
| 57 | 力文 |[Codepen](https://codepen.io/liwenchiou/pen/zxvYEpx?editors=1100) |
| 58 | suemma |[Codepen](https://codepen.io/suemma/pen/dPYyrpZ) |
| 59 | Atian |[Codepen](https://codepen.io/A-Tian-Chen/pen/xbwbwKE) |
| 60 | B |[Codepen](https://codepen.io/Babel777/pen/KwddqYj) |
| 61 | Lika |[Codepen](https://codepen.io/wlyvctff-the-solid/pen/PwPPJeG) |
| 62 | tanuki_狸貓 |[Codepen](https://codepen.io/tanuki320/pen/raOOYXx) |
| 63 | 主委加碼啦幹 |[Codepen](https://codepen.io/popbob-the-bashful/pen/EaVPmNE) |
| 64 | water | [Codepen](https://codepen.io/wateruby/pen/jEbWmQL)|
|65|小趴|[Codepen](https://codepen.io/papa2415/pen/azvNWqY)|
| 66 | Lucy |[Codepen](https://codepen.io/Lucytrycode/pen/WbQwKdX) |
| 67 | 伊迪 |[Codepen](https://codepen.io/eku10rei/pen/myerELy) |
| 68 | KOMATSU PEI |[Codepen](https://codepen.io/Komatsu2021/pen/xbwRqge?editors=1100) |
| 69 | cindy |[Codepen](https://codepen.io/a50134/pen/NPGdZpV) | -->
| 70 | Midy Wu |[Codepen](https://codepen.io/work-wu/pen/yyYzxxL) |
| 71 | Mini |[Codepen](https://codepen.io/miiinii32-Cheng/pen/GgpdRzL?editors=1100) |
| 72 | 4ping | [Codepen](https://codepen.io/928Libra/pen/zxvaGNe)
| 73 | maerc |[Codepen](https://codepen.io/Lu-Liangyu/pen/PwPyMrx) |
| 74 | Wafa |[Codepen](https://codepen.io/dqricwgo-the-reactor/pen/VYvRdRM?editors=1100) |
| 75 | PAgaNiNi |[Codepen](https://codepen.io/PA-OTTER/pen/QwjROMo?editors=1100)|
| 76 | 星雪糖 |[Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/pvgywpz?editors=1100)|

<!-- 快速複製 -->
<!-- | 排序 | 姓名 |[Codepen](連結) | -->