---
# System prepended metadata

title: "\U0001F3C5 切版任務 Day21 - background 練習"
tags: [軟體工程師體驗營 - 2024]

---

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

# 🏅 切版任務 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 內文字皆水平垂直置中



附上完成圖：
![](https://i.imgur.com/eMekBdL.png)


## 回報流程

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

![](https://i.imgur.com/vftL5i0.png)

<!-- 

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

-->


回報區
---

| 報數 | Discord 名字  |  Codepen／其他回饋                                                         |
|:----:|:-------------------:|:---------------------------------------------------------------------------------------------------------------------------------:|
| 1 | Meng | [Codepen](https://codepen.io/menglin1203/pen/NWVrjXa) |
| 2 | Michelle0417 | [Codepen](https://codepen.io/michelle0417/pen/bGyeWYR) |
| 3 | zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/XWwKREO) |
| 4 | 邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/qBGNmpe)|
|  05  | Tough life | [Codepen](https://codepen.io/hakuei0115/pen/JjqKNZg) |
|  6  | jerry | [Codepen](https://codepen.io/sony791210/pen/VwOjbEe) |
|  7  | s870012 | [Codepen](https://codepen.io/idzrvbnl-the-bashful/pen/GRaqmeW) |
|  08  | Aya | [Codepen](https://codepen.io/NoNameNote/pen/qBGNmvE) |
|  09  | tim | [Codepen](https://codepen.io/jskrtivy-the-animator/pen/GRaqmam) |
|  10  | Joey一針 | [Codepen](https://codepen.io/joeychou/pen/RwmRVXp) |
|  11  | WEIWEI | [Codepen](https://codepen.io/weiwei93/pen/PovzjpR?editors=0100) |
|  12  | Sammy | [Codepen](https://codepen.io/fsczdlla-the-bold/pen/GRaqEqM) |
|  13  | Daphne | [Codepen](https://codepen.io/DaphneShen/pen/OJYXgOE) |
|  14  | LiLiLiLi | [Codepen](https://codepen.io/jungang0414/pen/dyEXRqV) |
|  15  | JUN_ | [Codepen](https://codepen.io/Jun-L/pen/abrZwqZ?editors=0110) |
|  16  | 阿若 | [Codepen](https://codepen.io/skar5268/pen/abrZywV) |
|  17  | Antonio | [Codepen](https://codepen.io/gwhvusel-the-builder/pen/rNgLzzw) |
|  18  | Jiahe | [Codepen](https://codepen.io/Andywang-95/pen/RwmRgvy?editors=1100) |
|  19  | ninii傳教士 | [Codepen](https://codepen.io/niiniiii/pen/abrZwXp?editors=1100) |
|  20  | kawa | [Codepen](https://codepen.io/z83xji6/pen/abrZLjr?editors=1100) |
|  21  | yunyouob | [Codepen](https://codepen.io/ozkkvlsu-the-animator/pen/BaezmBJ)|
|  22  | Hailey | [Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/dyEXZop)|
|  23  | Emma | [Codepen](https://codepen.io/huang_L/pen/mdYEqJw)|
|  24  | mike_2049 | [Codepen](https://codepen.io/mike2049/pen/KKLMyxj)|
|  25  | Ariel | [Codepen](https://codepen.io/ariel0510/pen/LYoZemB) |
|  26  | easonpan | [Codepen](https://codepen.io/easonpan0904/pen/QWREaed) |
|  27  | Kaya | [Codepen](https://codepen.io/kayaribi/pen/rNgLdBg) |
|  28  |  小趴 | [Codepen](https://codepen.io/papa2415/pen/OJYXvvw)|
|  29  | Chia Pin | [Codepen](https://codepen.io/joker-cat/pen/XWwKqdp) |
|  30  | suandsu | [Codepen](https://codepen.io/su-su-the-sans/pen/RwmRyQv) |
|  31  | anderson666 | [Codepen](https://codepen.io/goodmanbuild/pen/bGyeMjd) |
|  32  | Andy_12 | [Codepen](https://codepen.io/lifann/pen/LYoZBxZ) |
|  33  | leo.chang | [Codepen](https://codepen.io/s16777216/pen/dyEXjzv) |
|  34  | 詹姆士 | [Codepen](https://codepen.io/z111048/full/YzbWjBY) |
|  35  | Zander | [Codepen](https://codepen.io/chuangmaster/pen/oNRLOKJ) |
|  36  | Chen | [Codepen](https://codepen.io/yingchangchen/pen/ZENONJo) |
|  37  | WW | [Codepen](https://codepen.io/Jeffery-the-bashful/pen/eYazaLP) |
|  38  | Lauren | [Codepen](https://codepen.io/Lauren8/pen/yLWJdor) |
|  39  | 薛逢 | [Codepen](https://codepen.io/vogqyrrj-the-selector/pen/NWVrvaq) |
|  40  | Mionne | [Codepen](https://codepen.io/neohyntw/pen/ZENpGZq) |
|  41  | Sonia | [Codepen](https://codepen.io/YUJOU/pen/xxNERRy?editors=1100)|
|  42  | Tanyaaaa | [Codepen](https://codepen.io/tanya77777/pen/GRajWjX) |
|  43  | Casey | [Codepen](https://codepen.io/Caseyyyyyyyyyyyyyy/pen/YzbGxpa) |
|  44  | macihuang | [Codepen](https://codepen.io/macy1215/pen/gOJwvLb) |
|  45  | JY | [Codepen](https://codepen.io/jylee0805/pen/qBGNyQr?editors=1100) |
|  46  | boin | [Codepen](https://codepen.io/boinji/pen/jOoMdMV) |
|  47  | 風羽 | [Codepen](https://codepen.io/Joy-Huang/pen/yLWaWBV) |
| 48 | Hsiu8767 |[Codepen](https://codepen.io/hsiu8767/pen/LYoRvpy) |
| 49 | 雪粒 |[Codepen](https://codepen.io/bzykdfhw-the-bashful/pen/oNRYXGm) |
| 50 | 小白 |[Codepen](https://codepen.io/xjbowjbr-the-builder/pen/qBGawbr) |
| 51 | Yini Chen |[Codepen](https://codepen.io/CYini/pen/eYaBVKy) |
| 52 | Shen | [Codepen](https://codepen.io/yan-Shen-the-decoder/pen/jOoVvXO) |
| 53 | peggy | [Codepen](https://codepen.io/peggy0419/pen/RwmKNxQ) |
| 54  | oyll | [Codepen](https://codepen.io/dizzydog-rgb/pen/abrpNPj) |
| 55  | Winnie | [Codepen](https://codepen.io/codepen-io-winnie/pen/gOJgXdg?editors=1100) |
|  56  | maruko1105 | [Codepen](https://codepen.io/marukox1105/pen/RwmpZmx) |
|  57  | LYC | [Codepen](https://codepen.io/LY-C/pen/QWRvejM) |
|  58  | Anais77 | [Codepen](https://codepen.io/liu-anais/pen/xxNrVNr) |
|  59  | 勾小勻 | [Codepen](https://codepen.io/qkvyujcc-the-encoder/pen/QWRgMgq) |
|  60  | Anna |[Codepen](https://codepen.io/Anna-Teng/pen/MWdvoaw)|
|  61  | Taiwanno1 |[Codepen](https://codepen.io/uhnxswdq-the-typescripter/pen/zYQPOWX)|
|  62  | Amy(咂摳) |[Codepen](https://codepen.io/nnxucgmc-the-builder/pen/ExzbbJZ)|
|  63  | hao jing |[Codepen](https://codepen.io/hjxu/pen/VwOymmO?editors=1101)|
|  64  | Jainee |[Codepen](https://codepen.io/Jainee0110/pen/QWRmQXd)|
| 65 | ChrisLin | [Codepen](https://codepen.io/vllzfzco-the-reactor/pen/vYwMoOG) |
| 66 | maru3096 | [codepen](https://codepen.io/deamru/pen/MWMzbMy) |




<!--
|  num  | user | [Codepen]() |
-->
