---
# System prepended metadata

title: "\U0001F3C5 5/24 (二) 每日切版任務 - background 練習"
tags: [公益程式體驗營 - 2022]

---

---
tags: 公益程式體驗營 - 2022
---

#  🏅 5/24 (二) 每日切版任務 - background 練習
## 題目 

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

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



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






<!--
ans:
[background](https://codepen.io/DoLucky/pen/rNJwqGv?editors=1100)
-->
---

## 回報流程

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

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

<!-- 解答：  -->

回報區
---
<!-- 1. yunyun
Codepen: https://codepen.io/yun_yunni/pen/ExQwyzY
-->

<!-- 2. Bruno Yu
Codepen: https://codepen.io/bruno-yu/pen/poaWbGx
-->

<!-- 3. Kiwi #9804
Codepen: https://codepen.io/kiwi1113/pen/GRQMqVv
-->

<!-- 4. 小不點#1793
Codepen:https://codepen.io/fwmfmgkx-the-flexboxer/pen/JjprRPY
-->

<!-- 5. Jason Chen
Codepen:https://codepen.io/jason60810/pen/JjprKgY
-->

<!-- 6.IreneLee
 codepen:https://codepen.io/ntjtcxpt-the-animator/pen/LYQzRPN
-->

<!-- 7. su#7798
codepen: https://codepen.io/wc-su/pen/YzerGXZ
-->

<!-- 8. Mitour#0672
codepen:https://codepen.io/mitour/pen/OJQxRMv 
-->

<!-- 9. CloThEs
codepen:https://codepen.io/bogwdnxx-the-sans/pen/NWyaRrL
-->

<!-- 10. Aaron
Codepen : https://codepen.io/narrowd4c/pen/jOZGMMd
-->

<!-- 11. Patti Chiu Patti#7774
Codepen: https://codepen.io/peiru-qiu/pen/LYQzRWx
-->

<!-- 12. Noy
https://codepen.io/MochiCodingPen/pen/VwQMKpW
-->



<!-- 13. han#9437
https://codepen.io/qnrxylcw-the-reactor/pen/YzerGOe
-->


<!-- 14. hw#0715
https://codepen.io/Lhwei/pen/yLvzaPm 
-->


<!-- 15. yuyu#6310
https://codepen.io/yuyu0905/pen/ZErXpvY?editors=1100
-->

<!--16. 黑松胖#4836
https://codepen.io/yi-chien-hsieh/pen/JjprRqy?editors=1100
-->

<!--17. 楓之聲#6945
https://codepen.io/sshane258/pen/yLvzVNO  
-->

<!-- 18. Tuhacrt#0008
Codepen: https://codepen.io/Tuhacrt/pen/PoQJbzg?editors=1100
-->

<!-- 19. Yawway
Codepen: https://codepen.io/yawwoei/pen/PoQJGMV?editors=1100
-->

<!-- 20. LHchien
https://codepen.io/lin_chien/pen/QWQqGMy
 -->
 
<!-- 21. andersonshen#4675
Codepen: https://codepen.io/luxyenni-the-bold/pen/poaWNaR
 -->
 
 <!-- 21. Cheng-Yu#1813
Codepen: https://codepen.io/ball77111/pen/ExQwNOL
 -->
 
<!--  22. Peng
https://codepen.io/peng-027/pen/BaYwQvo
 -->
 
<!-- 23. Hao#2485  
https://codepen.io/hao216/pen/PoQJbBo
-->

<!-- Rex Chu
Codepen:
https://codepen.io/rex_chu/pen/NWyabqK
-->

<!-- 25. Knn#0492
Codepen:
https://codepen.io/Knn_84/pen/KKQXaMy
-->

<!-- 26. Katie
Codepen:
https://codepen.io/Katie24/pen/jOZGVEE
-->

<!-- 27. Chaoci#2460
Codepen:
https://codepen.io/gmailchao/pen/eYVGgKb
-->

<!-- 28. Chi
Codepen: https://codepen.io/YoChi84/pen/ExQwWyj 
-->


<!-- Bao #4997
Codepen: https://codepen.io/baoh/pen/ExQwWPa 
-->

<!-- 30. Jamie
https://codepen.io/Wu220103/pen/bGLoqEK -->

<!-- 31. Vera#5592
https://codepen.io/skvera/pen/RwQLpBM
-->

<!-- 32. Stanley
https://codepen.io/sean_1215/pen/GRQMmZz
-->

<!-- 33. How#5806
https://codepen.io/howtobefine/pen/qBxPmqo
-->

<!-- 34. 雷雷#7844
https://codepen.io/lei-yi-jie/pen/qBxPmPK
-->

<!-- 35. Chaco#2993
https://codepen.io/chaco-wang/pen/JjprJKz
-->

<!-- 36. RJRS#9430
https://codepen.io/RJRS/pen/NWyavKM
-->

<!-- 37. Muse#9741
https://codepen.io/mu24/pen/rNJGwbb
-->

<!-- 38. Nini Chen#5790
https://codepen.io/ninistyle/pen/yLvzoxL
-->

<!-- 39. lyle#8123
https://codepen.io/tomys/pen/RwQLZjx
-->

<!-- 40. hsiuhsiu
https://codepen.io/hsiuhsiu/pen/Jjprror
-->

<!-- 41. Raymond Lam#0344
https://codepen.io/manshun-lam/pen/poaWWeb
-->

<!-- 42. #EVC1876
Codepen: https://codepen.io/elvi-chuang/pen/GRQMMqz
 -->
 
<!-- 43. Leo Song
codepen:
https://codepen.io/sunnylaba/pen/abqLLjG?editors=1100
-->

<!-- 44. ajhappy#6488
Codepen:https://codepen.io/ajhappy5438/pen/GRQMMLR
-->

<!-- 45. 眠瀾#8857
CodePen: https://codepen.io/laron9486/pen/rNJGGqY
-->

<!-- 46. Joyce
Codepen: https://codepen.io/joycehuang/pen/QWQqOQa?editors=1100 -->


<!-- 46. RayChen#6088
Codepen: https://codepen.io/raychen1996/pen/XWZezLL
 -->
 
<!-- 47. Cliff
https://codepen.io/Cliff_hex/pen/qBxPpWO
-->

<!-- 47. 鉦勝
https://codepen.io/atckmax823/pen/zYRERON
-->

<!-- 50. Cynthia1111
https://codepen.io/Cynthia1111/pen/zYREdRr?editors=1100
-->

<!-- 51. 花禮湖燒#7359
https://codepen.io/lai-pei/pen/mdXBXbG
-->

<!-- 52. bonnieli1414#4906
https://codepen.io/bonnieli1414/pen/RwQLQKq?editors=1100
-->

<!-- 53. Arista
https://codepen.io/arista-hsieh/pen/poaWaMw
-->

<!-- 54. RyanLu#3642
https://codepen.io/ryanlu1125/pen/QWQqQVE?editors=0100
-->

<!-- 55. J_u_d_y#5993
https://codepen.io/J_u_d_y/pen/BaYwrmW
-->

<!-- 55. Josh Chen#4552
https://codepen.io/hiphop825/pen/VwQMXNa?editors=1100
-->

<!-- 56. Ayre#0016
codepen:https://codepen.io/yichunlin09/pen/jOZGzKz?editors=1100
-->

<!-- 58. Carrie#2750
codepen:https://codepen.io/carrie-wang/pen/yLvzjNZ
-->

<!-- 59. deveryone#8090
https://codepen.io/raycheng/pen/zYREjYg
-->

<!-- 60. weihsin#5643
https://codepen.io/weisin/pen/abqLGVN?editors=1100
-->

<!-- 61. Lina Chen
Codepen: https://codepen.io/LinaChen/pen/ExQwRJL
-->

<!-- 62. amy芳#1385
Codepen: https://codepen.io/amy-chieng/pen/yLvzqNz
-->

<!-- 63. SASIMI#5099
Codepen: 
https://codepen.io/sashimi1327/pen/gOvGjdg
-->

<!-- 64. 小王
https://codepen.io/stevetanus/pen/RwQLmpe 
-->

<!-- 65. Jean
https://codepen.io/jean-liu/pen/PoQJWgK
-->

<!-- 66. xuan#0808
https://codepen.io/xuan0915/pen/yLvzmgw
-->

<!--67. Greta#0837
https://codepen.io/gretali/pen/GRQOgrv
-->

<!--68. 小天#7177
https://codepen.io/linyujing/pen/wvyPgRe
-->

<!--69. JustinLiu
Codepen: https://codepen.io/justin0227/pen/jOZavZQ?editors=1100
>

<!-- 70. shujhen#7734
Codepen：https://codepen.io/shujhen/pen/GRQMOPW
-->

<!-- 70. JessieCho
https://codepen.io/jessieCho/pen/xxYPewv
-->

<!-- 71. Tori
https://codepen.io/FlyTori/pen/VwQywag
-->

<!--
Codepen: https://codepen.io/Adif/pen/KKQZaLy
-->

<!-- 73. JackC
Codepen:https://codepen.io/key0329/pen/eYVyWog
-->

<!-- 74. Charlotte Lee
Codepen:https://codepen.io/charlotte-lee/pen/VwQyrdO?editors=1100
-->

<!-- 75. skypassion5000#4151
Codepen:https://codepen.io/skypassion5000/pen/wvypXgQ?editors=1100
-->

<!-- 76. mei#8421
Codepen:https://codepen.io/Shila-Chen/pen/QWQaVNO
-->

<!--77. Vicky Chang#8846
Codepen:
https://codepen.io/cychang/pen/vYdpqwB?editors=1100
-->

<!-- 78. danny123 
codepen: https://codepen.io/binlandz123/pen/XWZZrKJ?editors=1100
-->


<!-- 79.muzz#0345
 https://codepen.io/yunnnz/pen/qBxxNrY -->
 
 <!-- 80. WilliamChou#7375 
codepen: https://codepen.io/williampo78/pen/RwQQLKL
-->

<!-- 81.家洋#6999 
https://codepen.io/yang940648/pen/poaaoNE?editors=1100
-->

<!-- 82.yuling
 https://codepen.io/igzdflpu/pen/wvyyPZG
-->

<!-- 83.Erica Chen#6929
 https://codepen.io/ericachen/pen/poaLWYX
-->

<!-- 84. Arvin#6347 codepen:https://codepen.io/family929317/pen/wvymVOJ?editors=1100
-->

<!-- 85. Color#4378
Codepen:https://codepen.io/color0602/pen/OJQZbPW -->


<!-- 86. ling chang#1024
Codepen:https://codepen.io/ling-chang/pen/zYRajeW -->

<!-- 87. 白狐
Codepen: https://codepen.io/baihu7851/pen/XWZYPpR
-->

<!-- 88. Jumpye#8601
Codepen: https://codepen.io/Jumpye/pen/xxYaqNp?editors=1100
-->

<!-- 89. 阿基基
https://codepen.io/JIJI_GNI/pen/PoQOjPw 
-->

<!--90. TunacanBoy#2206
https://codepen.io/JamesDesign/pen/yLvGgjz -->


<!-- 91. zera#6060
codepen : https://codepen.io/zera-tseng/pen/ExQJmLY
-->

<!-- 92. 黑白兔#0684
codepen : https://codepen.io/johnny329/pen/abqrYrJ
-->