---
# System prepended metadata

title: "\U0001F3C5 Day 14 - background-image"
tags: [網頁切版直播班 - 2025 夏季]

---

# 🏅 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
```htmlembedded=
<div class="hero-section">
  <h1>歡迎來到我的網站</h1>
  <p>探索更多精彩內容</p>
</div>
```
CSS
```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 相關屬性，讓它滿版顯示一張背景圖 */
  ...
}

```
完成圖如下：
![](https://hackmd.io/_uploads/SJEcOnOMex.png)



## 回報流程

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

![](https://i.imgur.com/vftL5i0.png)
<!-- 解答：
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](連結) | -->