---
tags: 軟體工程師體驗營 - 2023
---

# 🏅 切版任務 Day21 - background 練習

## 題目

用 Codepen 練習以下：
請修改 [範例檔案](https://codepen.io/hexschool/pen/jOerWwg) 中的 CSS 完成以下設計條件：

1. box1 為垂直居中的不重複背景圖片，且背景色為 green 文字為白色
2. box2 為從左到右重複背景圖片，背景圖片起始位置從左上角開始，背景為黑色 文字為白色
3. 背景圖片連結請使用：https://i.ibb.co/3yhw5PR/string-of-beads.png
4. box 內文字皆水平垂直置中

附上完成圖：

## 回報流程

1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）


<!--

解答：
https://codepen.io/hexschool/pen/oNaLbwG?editors=1100

-->

回報區
---

| 報數 | Discord 名字 | Codepen／其他回饋 |
|:----:|:-------------------:|:---------------------------------------------------------------------------------------------------------------------------------:|
| 1 | Billy_Ti#9716 | [Codepen](https://codepen.io/Ti-Show/pen/OJBqygy?editors=1100) |
| 2 | 冬天#5215 | [Codepen](https://codepen.io/winter_/pen/yLRwYbX) |
| 3 | Ann Chou#5215 | [Codepen](https://codepen.io/annchou_illu/pen/poxYjdr) |
| 4 | 銀光菇#1692 | [Codepen](https://codepen.io/genesynthesis/pen/WNamQOo) |
| 5 | DoryH#0526 | [Codepen](https://codepen.io/dorihung/pen/eYPXpPK) |
| 6 | Rochel#4754 | [Codepen](https://codepen.io/rochelwang1205/pen/GRYepmK) |
| 7 | Berlin#7338 | [Codepen](https://codepen.io/3qberlin/pen/xxyBwQM?editors=1100) |
| 8 | satarkuo#5736 | [Codepen](https://codepen.io/SatarKuo/pen/Rwedrbr?editors=1100) |
| 9 | Tina02#2691 | [codepen](https://codepen.io/Tina02/pen/MWPxKOL) |
| 10 | judy123#2363 | [codepen](https://codepen.io/hsuantsong/pen/qBJvbob) |
| 11 | Jacky7035#9423 | [codepen](https://codepen.io/adens123/pen/vYVPLmX) |
| 12 | jia yu#8896 | [codepen](https://codepen.io/fjqxaznl-the-reactor/pen/ZEqPQxZ) |
| 13 | JimWang#6134 | [codepen](https://codepen.io/Jim-Wang-the-selector/pen/eYPXJeo?editors=1100) |
| 14 | DeLi#8324 | [codepen](https://codepen.io/delichaomoon/pen/KKGEVBb) |
|15|HsienLu#8316|[Codepen](https://codepen.io/Hsienlu/pen/zYmbvgy?editors=1100)|
| 16 | vvay#4113 | [codepen](https://codepen.io/pellmssx-the-sasster/pen/wvYOMXm) |
| 17 | Quantum#6093 | [Codepen](https://codepen.io/Min-Hao-Hung/pen/XWxGXyW)|
| 18 | Hao#2485 | [Codepen](https://codepen.io/Seanfeb16/pen/NWOJxoL)|
| 19 | henrykgb#5749 | [Codepen](https://codepen.io/henrymorgan666/pen/ExdMKZN)
| 20 | 姜承#8204 | [Codepen](https://codepen.io/Troy0718/pen/YzJgqEL)
| 21 | ChaosTu#9311 | [Codepen](https://codepen.io/torotu/pen/yLRwOje?editors=1100)|
| 22 | Ting.66#0912 | [Codepen](https://codepen.io/Ting66/pen/OJBqNvq?editors=1100)|
| 23 | 依依#6306 | [Codepen](https://codepen.io/Rita-Yang/pen/PoyLNxg?editors=1100)|
| 24 | Kaya#8857 | [Codepen](https://codepen.io/laron9486/pen/RwedRWO) |
| 25 | 東東#5015 | [Codepen](https://codepen.io/wearymask/pen/YzJgWXd) |
| 26 | Eero#1147 | [Codepen](https://codepen.io/Eero-Chiao/pen/eYPXJJQ) |
| 27 | Lychee KK | [Codepen](https://codepen.io/kakakala/pen/vYVPXgK)|
| 28 | Uli#1946 | [Codepen](https://codepen.io/uli1313/pen/jOeJMmK)|
| 29 | alan0305#2423 | [Codepen](https://codepen.io/alan0305/pen/PoyLGWm)|
| 30 | Aritan#1931 | [Codepen](https://codepen.io/Aritan/pen/qBJvarE?editors=1100)|
| 31 | Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/GRYeZRx) |
| 32 | gahwa#3562 | [CodePen](https://codepen.io/gahwa17/pen/oNaVzyL) |
| 33 | 辣椒#1002 | [Codepen](https://codepen.io/chilichen118/pen/vYVPXQm) |
| 34 | 兔子#6746 | [Codepen](https://codepen.io/CarrotDetector/pen/Jjmzbob) |
| 35 | Ataraxia#9977 | [Codepen](https://codepen.io/ataraxia8888/pen/abRwXvX) |
| 36 | Akira#9996 | [Codepen](https://codepen.io/Akira-Chen/pen/yLRwbVB) |
| 37 | 浪裡小白龍#6860 | [Codepen](https://codepen.io/Emillo/pen/eYPXROW?editors=1100) |
| 38 | 翔.#0859 | [Codepen](https://codepen.io/energy95272z/pen/bGmZRxB?editors=1100) |
| 39 | Daisy_Li#4231 | [Codepen](https://codepen.io/lidairong-gmail-com/pen/RwedZbW) |
|40|wiimax#4564|[Codepen](https://codepen.io/willismax/pen/mdzoMqW)
| 41 | Yuu#5361 |[Codepen](https://codepen.io/alycehwy/pen/rNqRGNa)
| 42 | peihsuan#6315 |[Codepen](https://codepen.io/peihsuanlai/pen/NWOJvzM)
| 43 | N0c7iluc3n7#4390 |[Codepen](https://codepen.io/huang-yu-cheng/pen/Baqbwrb)
| 44 | snow#0255 |[Codepen](https://codepen.io/snow21723/pen/OJBqxOrb)
| 45 | Jennifer Chuang#3937 | [Codepen](https://codepen.io/yujhen/pen/JjmzOjL) |
| 46 | David0799#4414| [Codepen](https://codepen.io/David0799/pen/zYmbpGy) |
| 47 | Rayo#8002| [Codepen](https://codepen.io/loborayo/pen/RwedxwW) |
| 48 |Syrena #3897|[Codepen](https://codepen.io/Syrena-Chung/pen/YzJgYrW)
| 49 |Döng#2328|[Codepen](https://codepen.io/htamlkdz-the-encoder/pen/PoyLyoR)
| 50 |史滴芬#4310|[Codepen](https://codepen.io/steven870107/pen/KKGEGBK)
| 51 |youtown#0797|[Codepen](https://codepen.io/youtown/pen/YzJgRwR)
| 52 |小魚＃8614|[Codepen](https://codepen.io/gizelliang/pen/WNamYGr)
| 53 |K（アギルダー）#0386|[Codepen](https://codepen.io/klay376014/pen/MWPxZVz)
| 54 |長方形#9612|[Codepen](https://codepen.io/imjjw/pen/YzJgBWx)
| 55 |yoyo#1003|[Codepen](https://codepen.io/pen/KKGEJWj)|
| 56 | Zhong#8917 | [Codepen](https://codepen.io/klfjrlod-the-sasster/pen/zYmbeeZ) |
|57|肉個阿倫#7172|[Codepen](https://codepen.io/i9574385/pen/JjmzzLa)|
|58|penny#6214|[Codepen](https://codepen.io/penny8989/pen/jOeJRoQ?editors=1100)|
|59|汪汪#4486|[Codepen](https://codepen.io/hunwooooof/pen/MWPRgwM)|
|60|司機叔叔#2463|[Codepen](https://codepen.io/bigv5566/pen/KKGYKwV)|
|61|Yi Jing 沂倞#2027|[Codepen](https://codepen.io/Yi-Jing-71080635/pen/wvYZBKg?editors=1100)|
|62|Janet#5784|[Codepen](https://codepen.io/janetlinnn/pen/wvYZoQO?editors=1100)|
|63|Sonia Wu#7154|[Codepen](https://codepen.io/YUJOU/pen/wvYZeaL?editors=1100)|
|64|吳偉雄恩#2256|[Codepen](https://codepen.io/Bamboo1212/pen/RweOZmp)|
|65|HsuanTang#1349|[Codepen](https://codepen.io/HsuanTang/pen/wvYZreE)|
|66|SKey#9905|[Codepen](https://codepen.io/Dale-Chien/pen/MWPRxvb)|
|67|雲漢#5319|[codepen](https://codepen.io/keon981/pen/JjmVQPJ)|
|68|鄭舜仁#6606|[codepen](https://codepen.io/randomno/pen/MWPRNjQ)|
|69|townyuan#2653|[codepen](https://codepen.io/townyuan/pen/rNqgaER)|
|70|wendyli#2155|[codepen](https://codepen.io/rockayumitw/pen/qBJGNOX)|
|71|Yvonne#2721|[codepen](https://codepen.io/Evonne/pen/LYgoNvL?editors=1100)
|72|boki#3717|[codepen](https://codepen.io/boki-wang/pen/jOeoGQJ)
|73|Kulimusoda#2785|[codepen](https://codepen.io/yuch3n_chen/pen/poxmWQm)|
|74|CuraLin#2648|[codepen](https://codepen.io/curalin/pen/abRrLxm)|
|75|PayRoom#8328|[CodePen](https://codepen.io/water38198/pen/KKGLZzm)
|76|liam9930#4129|[CodePen](https://codepen.io/jgnjfvvt-the-lessful/pen/jOeoZPK)|
|77|杰_jie#9088|[CodePen](https://codepen.io/jgnjfvvt-the-lessful/pen/jOeoZPK)|
|78|歐陽龍龍#1061|[CodePen](https://codepen.io/dizzydog-rgb/pen/PoyvXgb)|
|79|JasonChang#7847|[CodePen](https://codepen.io/Ti-Show/pen/OJBqygy?editors=1100)|
|80| FiReBrO#0557 |[CodePen](https://codepen.io/firebro42/pen/YzJowGg)|
|81| Snadra#1987 |[CodePen](https://codepen.io/mlqmhltg/pen/NWOZzNa)|
|82| Celia#1715 |[CodePen](https://codepen.io/drdrvpgf-the-bashful/pen/ZEqdWQq?editors=1100)|
|83| NathanJames#8120 |[CodePen](https://codepen.io/ufo060204/pen/GRYbVZL)|
| 84 | Tami#6742 | [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/JjmgGVw) |
| 85 | +7#8492 | [Codepen](https://codepen.io/tojibom/pen/GRwRPmd) |
| 86 | weiting#3489 | [Codepen](https://codepen.io/weiting14/pen/vYQOzyy?editors=1100) |
| 87 |yuling#1634|[Codepen](https://codepen.io/igzdflpu/pen/rNQVJjM)|
| 88 | 薇拉#8110 |[Codepen](https://codepen.io/michellecc0522/pen/KKrdeZP)|
|89| cmlb0212|[Codepen](https://codepen.io/Chungmin0212/pen/rNQxrKG)|
|90| Rong|[Codepen](https://codepen.io/Loonng/pen/abQNJgg?editors=1100)|
|91| 初心#9021|[Codepen](https://codepen.io/Sylviax/pen/xxQRwEG?editors=1100)|
|92| lishuan#3698|[Codepen](https://codepen.io/lishuan/pen/yLQVKjW?editors=1100)|
|93| 小明#4408|[Codepen](https://codepen.io/ujlylmbv-the-lessful/pen/jOQxQKz)|
|94| betty#0693|[Codepen](https://codepen.io/betty-hu/pen/LYXJbQL?editors=0100)|