---
tags: 30 天軟體工程師體驗營｜2025
---

# 🏅 切版任務 Day9 - background 練習

## background 介紹
CSS 中的 background 屬性用來定義元素的背景樣式。
可以使用以下常見子屬性來客製化背景：

* background-color：設定背景顏色
* background-image：設定背景圖片
* background-repeat：設定背景是否重複（如 no-repeat）
* background-position：控制背景圖片的位置，例如 center, top left, right bottom
* background-size：設定圖片縮放方式，如 cover, contain
* background-attachment：控制背景是否隨著頁面滾動，例如 fixed, scroll

background 是個縮寫屬性，也可以一次寫完所有設定：

background: url('xxx.jpg') no-repeat center / cover;

<iframe height="300" style="width: 100%;" scrolling="no" title="每日任務 - 🏅 position 技巧補充題目 - 範例 7" src="https://codepen.io/yen-kg/embed/JooPbGr?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yen-kg/pen/JooPbGr">
每日任務 - 🏅 position 技巧補充題目 - 範例 7</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

## 題目

用 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 | 4chan | [Codepen](https://codepen.io/ijuolaqc-the-looper/pen/xbbJgLL) |
| 2 | 7Lun | [Day9-Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/PwwBWEL?editors=1100) |
|3|小趴|[Codepen](https://codepen.io/papa2415/pen/OJYXvvw)|
| 4 | ying | [Codepen](https://codepen.io/Lara-Lin/pen/MYYBJXj?editors=1111) |
| 5 | dean | [Codepen](https://codepen.io/ijuolaqc-the-looper/pen/xbbJgLL) |
| 6 | 随縁 | [Codepen](https://codepen.io/zuien/pen/RNNBpaz) |
| 7 | 馬德| [Codepen](https://codepen.io/maywang/pen/WbbKpaE) |
| 8 | WAWATA| [Codepen](https://codepen.io/wa-wa-GNOHC-WA-Wa/pen/raaryvr ) |
| 9 |林明德|[Codepen](https://codepen.io/lwescocn-the-vuer/pen/NPPBpov)
| 10 |B|[Codepen](https://codepen.io/Babel777/pen/QwwBpZq)
| 11 |Aoi|[Codepen](https://codepen.io/zching07/pen/EaapWzM)
| 12 |Joseph_Kyuu|[Codepen](https://codepen.io/zrzfastd-the-reactor/pen/PwwBmYp)
| 13 |tina01170|[Codepen](https://codepen.io/tina-huang-the-bashful/pen/zxxLwOb)
| 14 |Min|[Codepen](https://codepen.io/cvqevoxk-the-decoder/pen/GggBmqW)
| 15 | Pastor | [Codepen](https://codepen.io/peter_hung/pen/wBBxdMr)|
| 16 | Owen He | [Codepen](https://codepen.io/owen1120/pen/azzjWEz?editors=1100) |
| 17 | Daniel Huang | [Codepen](https://codepen.io/Hou-Chieh-HUANG/pen/XJJBRzv) |
| 18 | akkk | [Codepen](https://codepen.io/ak-wu-the-decoder/pen/oggMWZb) |
| 19 | 登登登 | [Codepen](https://codepen.io/Duncanin/pen/pvvZPzK) |
| 20 | andy | [Codepen](https://codepen.io/ewnblckz-the-styleful/pen/emmjRdJ) |
| 21 | RUDY | [Codepen](https://codepen.io/Rudy-crw/pen/QwwBgaW?editors=1100) |
| 22 | 謝天 | [Codepen](https://codepen.io/crisxie/pen/PwwBjRL) |
| 23 | Stan | [Codepen](https://codepen.io/Stan-Huang/pen/pvvZrKd) |
| 24 | HLC | [Codepen](https://codepen.io/pppbbb262626/pen/pvvKrXO?editors=1100) |
| 25 | 力文 | [Codepen](https://codepen.io/liwenchiou/pen/MYYBEYq) |
| 26 | Zing | [Codepen](https://codepen.io/TZU-YIN-WANG/pen/qEEyRQo) |
| 27 | Melanie | [Codepen](https://codepen.io/pnrcspte-the-animator/pen/KwwBXrE) |
| 28 | Archang | [CodePen](https://codepen.io/pxfnrvgk-the-styleful/pen/MYYBrao)|
| 29 | klaus Chen | [CodePen](https://codepen.io/Klaus-Chen/pen/PwwBRQV)|
| 30 | 柔術小子 | [CodePen](https://codepen.io/Li-Lee-Everything-is-PM/pen/zxxLPXE?editors=1100)|
| 31 | Ataya | [Codepen](https://codepen.io/zin-seven/pen/jEEpzLN) |
| 32 | Arthur | [Codepen](https://codepen.io/Shen-Po-Yang/pen/raardqy) |
| 33 | cks40660 | [Codepen](https://codepen.io/CKS40660/pen/KwwBRdN) |
| 34 | stone | [Codepen](https://codepen.io/bgrwlzoz-the-reactor/pen/jEEpxrV)|
| 35 | GaryLin | [Codepen](https://codepen.io/kofnvgmr-the-builder/pen/azzKYGE)|
| 36 | Orligege | [Codepen](https://codepen.io/S-Tung/pen/oggGgOm?editors=1100)|
| 37 | WEIWEI | [Codepen](https://codepen.io/weiwei93/pen/LEEdWBR) |
| 38 | BaLaLaYOU | [Codepen](https://codepen.io/bashawxd-the-bashful/pen/LEEBqjp) |
| 39 | 消波塊 | [Codepen](https://codepen.io/PaulHsiao/pen/vEEawjg) |
|40|JHT|[Codepen](https://codepen.io/juanht/pen/emmjwmY)|
|41|ann.328|[Codepen](https://codepen.io/yqmegupa-the-styleful/pen/JooajWW)|
| 42 | Peggy | [Codepen](https://codepen.io/cpt23462599/pen/EaaexEW) |
| 43 | nora_zizi | [Codepen](https://codepen.io/Nora-Ch/pen/bNNxNzg) |
| 44 | mercury2508. | [Codepen](https://codepen.io/Mercury2508/pen/jEEvbOd) |
| 45 | suemma | [Codepen](https://codepen.io/suemma/pen/azzadOE) |
| 46 | Cyan66 | [Codepen](https://codepen.io/Cyan66/pen/PwwdPxV) |
| 47 | Leonard | [Codepen](https://codepen.io/hyyfjqra-the-sans/pen/bNNxEzg) |
| 48 | mambo | [Codepen](https://codepen.io/chiang_mb/pen/KwwxVJX) |
| 49 | carrie0416 | [CodePen](https://codepen.io/Hong-Carrie/pen/ZYYMWER)|
| 50 | William Hsieh | [CodePen](https://codepen.io/lsaimqxa-the-vuer/pen/Kwwxzbr?editors=1100)|
| 51 | Hugh | [CodePen](https://codepen.io/Hugh-Chen/pen/OPPoXeY?editors=1100)|
| 52 | Fang | [CodePen](https://codepen.io/Fang-the-selector/pen/MYYqjyJ?editors=1100)|
| 53 | CBK | [CodePen](https://codepen.io/BK-C-the-styleful/pen/yyyxJxY)|
| 54 | Kanaaa咖娜 | [CodePen](https://codepen.io/Kanayao/pen/WbbgoeO)|
| 55 | Holly | [CodePen](https://codepen.io/LEE-HOLLY/pen/yyyxJqY)|
| 56 | allen3290 | [CodePen](https://codepen.io/udadkudw-the-looper/pen/XJJPNXy)|
| 57 | holysi | [CodePen](https://codepen.io/holysi/pen/NPPBegr)|
|58| Saika| [CodePen](https://codepen.io/pen/?editors=1100)|
|59| ArvinSu| [CodePen](https://codepen.io/Arvin-Su/pen/myyGRep)|
|60|anson.www| [CodePen](https://codepen.io/zzkvrkzi-the-sans/pen/gbbdLoW)|
| 61 | yang |[codepen](https://codepen.io/Yang-J/pen/KwwxmMQ?editors=1100)|
| 62 | Kai-Ling |[codepen](https://codepen.io/Kai-Ling-Huang/pen/ByyOYwZ)|
| 63 | 叮咚 |[codepen](https://codepen.io/pinchieh-lin/pen/gbbdvvm)|
| 64 | QoQ |[codepen](https://codepen.io/xxmevbri-the-reactor/pen/QwwVQoV)|
| 65 | oyll |[codepen](https://codepen.io/dizzydog-rgb/pen/KwwxoBP)|
| 66 | Chuang |[codepen](https://codepen.io/uidoytjq-the-solid/pen/yyyxEQQ?editors=1100)|
| 67 | Michael - 鴿子 | [CodePen](https://codepen.io/KeinSacer_Michael/pen/raarmWb)|
| 68 | 牛奶 | [CodePen](https://codepen.io/0omilko0/pen/WbbgoJJ?editors=1100)|
| 69 | An | [CodePen](https://codepen.io/bzrpsbjq-the-encoder/pen/EaaeJPv)|
| 70 | Jane | [CodePen](https://codepen.io/jkmx/pen/NPPzQdb)|
| 71 | Jessie | [Jessie 的 Codepen](https://codepen.io/bakyfkso-the-looper/pen/WbbaQym)
|72|蛋殼|[Codepen](https://codepen.io/weybrian/pen/LEEgNaV)
|73|Aidd.|[Codepen](https://codepen.io/aiddchen/pen/azzRZyN)
| 74 | Apple Pie | [CodePen](https://codepen.io/ymevqzjf-the-builder/pen/PwwyzJe?editors=1100)|
| 75 | fishcold9714 | [CodePen](https://codepen.io/yu-han-feng/pen/gbbBgmo)|
| 76 | leo_tzou | [CodePen](https://codepen.io/JH_Portfolio/pen/yyyRbBo)|
| 77 | jingle0900 | [CodePen](https://codepen.io/EvaLi0472/pen/wBBYyvG?editors=1100)|
| 78 | haohoaliao | [CodePen](https://codepen.io/tqdtaouh-the-styleful/pen/vEEVrJE?editors=1100)|
| 79 | Acadia | [CodePen](https://codepen.io/Acadia/pen/QwwZxzQ)|
| 80 | Kath | [CodePen](https://codepen.io/JLin-the-lessful/pen/myyzGgZ)|
| 81 | Sylvia | [CodePen](https://codepen.io/Sylvia93458/pen/EaaddOJ)|
| 82 | kelsonhouse | [Codepen](https://codepen.io/Kelson-House/pen/ByyGQZK?editors=1100)|
| 83 | BL | [Codepen](https://codepen.io/bonnieli1414/pen/bNNQBxW?editors=1100)|
| 84 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/JooeJWo?editors=1100)|
| 85 | 蛋白 | [蛋白的Codepen Day9](https://codepen.io/sjlu-0/pen/VYYVrqb)|
| 86 | Chia__ |[Codepen](https://codepen.io/Chia-the-encoder/pen/myyQKqd)|
| 87 | wei_0982 |[Codepen](https://codepen.io/nico-lai/pen/ByyPEXp)|
| 88 | tung |[Codepen](https://codepen.io/oltsegon-the-looper/pen/dPPQXyY)|
| 89 | 姜承 |[Codepen](https://codepen.io/Troy0718/pen/YzJgqEL?editors=0100)|
| 90 | vima | [CodePen](https://codepen.io/chin7004/pen/raaooZe)|
| 91 | Toung | [CodePen](https://codepen.io/Toung/pen/OPPrQqN)
| 92 | Astrid | [2025/05/14 DAY9](https://codepen.io/astrid321654/pen/yyyGmLZ)|
| 93 | duchi | [CodePen](https://codepen.io/sqaz0502/pen/zxxeZox)|
| 94 | Rogan | [CodePen](https://codepen.io/RoganHsu/pen/VYYgMdV)|
| 95 | Mic | [CodePen](https://codepen.io/Mic-Pan/pen/azzMaRv)|
| 96 | ja4071 | [CodePen](https://codepen.io/SHAO-L/pen/zxxQxyV)|
|97| jean_ke| [CodePen](https://codepen.io/Jean-Ke/pen/raaXEOB)
| 98 | Nea | [CodePen](https://codepen.io/neacode/pen/azOoXwP?editors=1100)|
| 99 | 富 | [CodePen](https://codepen.io/spring40747/pen/QwbWyEe)|
| 100 | 木乃伊 Kimi | [CodePen](https://codepen.io/veqjtzdb-the-lessful/pen/qEdBjQa?editors=1100)|
| 101 | 野鴿 | [CodePen](https://codepen.io/HoshinoSyouta/pen/QwwVNdQ)|
| 102 | Lynn | [CodePen](https://codepen.io/Yen-Ling-Peng/pen/WbvQWEJ)|
| 103 | kent_31665 | [CodePen](https://codepen.io/kentlee406/pen/ZYGQLGe?editors=1100)|
| 104 | 禹成林 | [CodePen](https://codepen.io/useirin/pen/WbbWXYR)|
| 105 | waynetrece | [CodePen](https://codepen.io/waynetrece/pen/zxGExze)|
| 106 | JiaMori | [CodePen](https://codepen.io/jiamori/pen/EajQbeg?editors=1100)|
| 107 | Yanchen16 | [CodePen](https://codepen.io/keyrtlij-the-reactor/pen/EajRRpQ)|
<!--【快速複製】
| 00 | 000 | [CodePen]()|