--- tags: 網頁切版直播班 - 2022 夏季班 --- # 🏅 Day 17 ## background-image ### 認識 CSS 語法 background-image 通常會用來設定背景圖片，用法如下： ```htmlembedded= <div class="image"></div> ``` ```css= .image{ height:300px; background-image:url("https://images.unsplash.com/photo-1599978364004-95d0725c5bb9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80") } ``` > 開發時可以使用相對路徑或絕對路徑，不過因為 Codepen 無法載入本地圖片，需透過圖片位址（絕對路徑） * **background-position** 如果圖片太大則會出現這樣的畫面 ![](https://i.imgur.com/18kReJN.png) 什麼都看不到XD 要調整他的位置可以使用 `background-position` > top ｜ bottom ｜ left ｜ right ｜ center ```css background-position: center; ``` ![](https://i.imgur.com/EZdkxzS.jpg) * **background-size** 但是原圖並沒有這麼大，所以使用 `background-size` 調整 > auto ｜ contain ｜ cover ```css background-size: contain; ``` ![](https://i.imgur.com/hPuts4F.png) background-size 改用 cover 查看兩者的差別。 > contain 是在不超過原圖的大小前提下等比縮小 > cover 是等比例縮放，讓圖片可以蓋滿元素寬高。 ```css background-size: cover; ``` ![](https://i.imgur.com/uOkBksW.jpg) * **background-repeat** 背景圖片重複的問題，為了不讓他重複所以要使用 `background-repeat` 設定 > repeat(預設值)｜ repeat-x ｜ repeat-y ｜ no-repeat > ```css background-repeat: no-repeat; ``` ![](https://i.imgur.com/ur2kWEi.png) **完整程式碼** ```htmlembedded= <div class="image"></div> ``` ```css= .image{ height:300px; background-image:url("https://images.unsplash.com/photo-1599978364004-95d0725c5bb9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80"); background-position: center; background-size: cover; background-repeat: no-repeat; } ``` ## 題目 請到 [Unsplash 官網](https://unsplash.com/)上找一張圖片，並使用 background-image 製作背景圖（請不要複製上方程式碼） [Codepen 範例-背景圖應用](https://codepen.io/hexschool/pen/mdxdbxo)（可只做背景圖的部分，文字部分可以省略） ## 回報流程 將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 解答位置請參考下圖（需打開程式碼的部分觀看） ![](https://i.imgur.com/vftL5i0.png) <!-- 解答： --> 回報區 --- | Discord | CodePen / 答案 | |:-----------------:|:--------------------------------------------------------------------------:| | 薏慈#3795 | [CodePen](https://codepen.io/its_wang/pen/OJvEQKq) | | Anna Liu#3794 | [CodePen](https://codepen.io/anna618/pen/YzaZbjL) | | 小鐵#2814 | [CodePen](https://codepen.io/xiron/pen/GRxWWMm) | | CloThEs#7837 | [CodePen](https://codepen.io/CloThEsZ/pen/RwMpoOE) | | 布魯諾#7239 | [CodePen](https://codepen.io/bruno-yu/pen/jOzBypL) | | 黃士桓#7654 | [codePen](https://codepen.io/shr-huan-huang/pen/dymvNjB) | | Clara#1275 | [codePen](https://codepen.io/bsupixqu/pen/poLeRXL) | | bonnieli1414#4906 | [codePen](https://codepen.io/bonnieli1414/pen/bGvqgJW?editors=1100) | | JackC#0411 | [codePen](https://codepen.io/key0329/pen/gOemgVw) | | L0F0#8733 | [codePen](https://codepen.io/l0f0/pen/qBorrBe) | | Daisy_Li#4231 | [CodePen](https://codepen.io/lidairong-gmail-com/pen/zYWZNeM?editors=1100) | | Jamie Wu#9345 | [CodePen](https://codepen.io/Wu220103/pen/RwMpKzr) | | WEI_RIO#9342 | [CodePen](https://codepen.io/wei_wu/pen/vYRxxgX?editors=1100) | | Clara Cai#7097 | [CodePen](https://codepen.io/Clara-Snowy/pen/BarWWdm) | | azami#5986 | [CodePen](https://codepen.io/azami/pen/xxWqqxN) | | christina#6185 | [Codepen](https://codepen.io/chrisc0210/pen/RwMppWR) | | LinaChen#1796 | [CodePen](https://codepen.io/LinaChen/pen/qBorrpO) | | YC#2522 | [Codepen](https://codepen.io/YCLu/pen/qBorrXd) | | 洋蔥#5295 | [Codepen](https://codepen.io/HSUNA/pen/RwMppRG?editors=1100) | | Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/XWEMpvy) | | 大衛#4869 | [CodePen](https://codepen.io/exnsrpjc/pen/XWEMpwy) | | PeggyLiao#1552 | [CodePen](https://codepen.io/PeiJu-Liao/pen/yLKMMjZ?editors=1100) | | 小諾#1866 | [CodePen](https://codepen.io/noichan/pen/KKoWWLE) | | YI#0863 | [CodePen](https://codepen.io/YI0305/pen/ExEWWGj) | | Cliff#4606 | [CodePen](https://codepen.io/Cliff_hex/pen/OJvpmLE) | | Leo Song #8278 | [CodePen](https://codepen.io/sunnylaba/pen/MWVpmgN) | | 威爾#1694 | [codePen](https://codepen.io/WILL_Wu/pen/LYdWWMR) | | hungya#0773 | [CodePen](https://codepen.io/hungya777/pen/KKoWWbJ) | | Iris Huang#6727 | [CodePen](https://codepen.io/ythuang/pen/RwMpVoM) | | int#7518 | [Codepen](https://codepen.io/intHuang/pen/vYRxmgR?editors=0110) | | 群嘉#3943 | [CodePend](https://codepen.io/efzdamnp-the-lessful/pen/qBormxP) | | JarDar#6980 | [codepen](https://codepen.io/jardarpen/pen/gOemWgd) | | Hsiu#8767 | [codepen](https://codepen.io/amy-hsiu/pen/jOzBmVj) | | 溡月#2553 | [CodePen](https://codepen.io/winterwinterpu/pen/yLKMMdd) | | LINK#1933 | [CodePen](https://codepen.io/miyayoe/pen/eYMvWqW) | | Tuhacrt#0008 | [CodePen](https://codepen.io/Tuhacrt/pen/mdxWwPY) | | 阿翰 #1984 | [codepen](https://codepen.io/JohnHan05/pen/JjLWJZw) | | Melon #0380 | [codepen](https://codepen.io/BalaFang/pen/zYWZzaL) | | Henry#7386 | [Codepen](https://codepen.io/h1nr9/pen/LYdWLJv) | | zera#6060 | [codepen](https://codepen.io/zera-tseng/pen/bGvqRxg) | | yuyu#6310 | [codepen](https://codepen.io/yuyu0905/pen/GRxWvKq) | | QOO#8446 | [Codepen](https://codepen.io/QOOQOOQ/pen/rNdymzL?editors=1100) | | 黑白兔#0684 | [Codepen](https://codepen.io/johnny329/pen/WNzpEwd) | | 威0#6919 | [Codepen](https://codepen.io/n0918679182/pen/rNdyzKE) | | Benson#6763 | [Codepen](https://codepen.io/kumashow/pen/bGvqryx) | | 雷雷#7844 | [Codepen](https://codepen.io/lei-yi-jie/pen/LYdWjrN) | | LHchien33#6232 | [Codepen](https://codepen.io/lin_chien/pen/JjLWrgL) | | SASIMI#5099 | [Codepen](https://codepen.io/sashimi1327/pen/oNqzjBj) | | 痴醉兔 | [Codepen](https://codepen.io/wei-nie/pen/BarWmPz) | | suihsilan#9485 | [Codepen](https://codepen.io/suihsilan/pen/PoRpOLz) | | 我是泇吟 #5189 | [Codepen](https://codepen.io/kljuqbxs/pen/qBorxWq) | | ajhappy#6488 | [Codepen](https://codepen.io/ajhappy5438/pen/KKoWQPY) | | 鉦勝 #8333 | [[Codepen]](https://codepen.io/atckmax823/pen/MWVpQVK) | | Chi#7605 | [Codepen](https://codepen.io/YoChi84/pen/ZExerNL) | | peter#0 | [Codepen](https://codepen.io/JIAN-RONG/pen/PoRpeBO?editors=1100) | | RayChen#6088 | [Codepen](https://codepen.io/raychen1996/pen/gOemzVv) | | leeli#6243 | [Codepen](https://codepen.io/leelilee/pen/JjLWvqX) | | Fanglin#4054 | [CodePen](https://codepen.io/flynn841028/pen/bGvqvYe) | | YU #0618 | [CodePen](https://codepen.io/yoken_/pen/yLKMKJM) | | 楓之聲#6945 | [codepen](https://codepen.io/sshane258/pen/poLeKEM) | |yu魚#1330 | [CodePen](https://codepen.io/Yu_yu/pen/jOzBzpw)| |ssozr#4680|[codepen](https://codepen.io/ssozr/pen/WNzpKrr)| |Pony#6778|[codepen](https://codepen.io/Pony0303/pen/gOemjvb)| |Joyce#3790|[codepen](https://codepen.io/joycehuang/pen/eYMvVqv?editors=1100)| | Jason1#2538 | [CodePen](https://codepen.io/jotwxezb-the-encoder/pen/KKoWxwQ) | | 咻蹦#1526 | [CodePen](https://codepen.io/emmasyu/pen/KKoWBLy?editors=1100)| | Mylène#2481 |[Codepen](https://codepen.io/hamajibashi/pen/jOzBvPY)| |Shuo#1596 | [Codepen](https://codepen.io/chiangchungshuo/pen/mdxWzRx)| |小白#2406|[Codepen](https://codepen.io/gracewhite/pen/qBorvRy)| |jin.huang#4666|[Codepen](https://codepen.io/HJ7878/pen/RwMpmrj?editors=1100)| |Amberhh#2465|[Codepen](https://codepen.io/Amberhh/pen/bGvqyYZ?editors=1100)| |Arista#5802|[Codepen](https://codepen.io/arista-hsieh/pen/ZExedGL)| |Ryan Chiang#6649|[Codepen](https://codepen.io/ryanchiang/pen/rNdyEjG)| |紙飛機#1335|[Codepen](https://codepen.io/paperplanea/pen/abYJgKj)| |mickey#8745|[Codepen](https://codepen.io/weizhetseng/pen/xxWqoyy)| |Vera#5592|[Codepen](https://codepen.io/skvera/pen/ZExegpM)| |Yuna Huang#2692|[Codepen](https://codepen.io/Yuna1002/pen/qBoreXB)| |kevin6131 Huang#2692|[Codepen](https://codepen.io/kun8349/pen/NWYpQLM)| | EmilyLin#0526 |[Codepen](https://codepen.io/c199615/pen/rNdmaJR)||Ron Liang#7277|[Codepen](https://codepen.io/ron-go/pen/bGvWNdW)| |Van.CS|[Codepen](https://codepen.io/fbacojji-the-selector/pen/rNdmVPW)| | Anna Liu#3794 | | | | | 小鐵#2814 | [CodePen](https://codepen.io/xiron/pen/GRxWWMm) | | CloThEs#7837 | | | | | 布魯諾#7239 | | | | | 黃士桓#7654 | | | | | Clara#1275 |[CodePen](https://codepen.io/bsupixqu/pen/poLeRXL)| | bonnieli1414#4906 | | | | | JackC#0411 | | | | | L0F0#8733 | | | | | Daisy_Li#4231 | | | | | Jamie Wu#9345 | | | | | WEI_RIO#9342 | | | | | Clara Cai#7097 | | | | | azami#5986 | | | | | christina#6185 | | | | | LinaChen#1796 | | | | | YC#2522 | | | | | 洋蔥#5295 | | | | | Jenny真#7532 | | | | | 大衛#4869 | | | | | PeggyLiao#1552 | | | | | 小諾#1866 | | | | | YI#0863 | | | | | Cliff#4606 | [CodePen](https://codepen.io/Cliff_hex/pen/OJvpmLE) | | Leo Song #8278 | [CodePen](https://codepen.io/sunnylaba/pen/MWVpmgN) | | 威爾#1694 | [codePen](https://codepen.io/WILL_Wu/pen/LYdWWMR) | | hungya#0773 | [CodePen](https://codepen.io/hungya777/pen/KKoWWbJ) | | Iris Huang#6727 | [CodePen](https://codepen.io/ythuang/pen/RwMpVoM) | | int#7518 | [Codepen](https://codepen.io/intHuang/pen/vYRxmgR?editors=0110) | | 群嘉#3943 | [CodePend](https://codepen.io/efzdamnp-the-lessful/pen/qBormxP) | | JarDar#6980 | [codepen](https://codepen.io/jardarpen/pen/gOemWgd) | | Hsiu#8767 | [codepen](https://codepen.io/amy-hsiu/pen/jOzBmVj) | | 溡月#2553 | [CodePen](https://codepen.io/winterwinterpu/pen/yLKMMdd) | | LINK#1933 | [CodePen](https://codepen.io/miyayoe/pen/eYMvWqW) | | Tuhacrt#0008 | [CodePen](https://codepen.io/Tuhacrt/pen/mdxWwPY) | | 阿翰 #1984 | [codepen](https://codepen.io/JohnHan05/pen/JjLWJZw) | | Melon #0380 | [codepen](https://codepen.io/BalaFang/pen/zYWZzaL) | | Henry#7386 | [Codepen](https://codepen.io/h1nr9/pen/LYdWLJv) | | zera#6060 | [codepen](https://codepen.io/zera-tseng/pen/bGvqRxg) | | yuyu#6310 | [codepen](https://codepen.io/yuyu0905/pen/GRxWvKq) | | QOO#8446 | [Codepen](https://codepen.io/QOOQOOQ/pen/rNdymzL?editors=1100) | | 黑白兔#0684 |[Codepen](https://codepen.io/johnny329/pen/WNzpEwd) | | 威0#6919 |[Codepen](https://codepen.io/n0918679182/pen/rNdyzKE) | | Benson#6763 | [Codepen](https://codepen.io/kumashow/pen/bGvqryx)| | 雷雷#7844 |[Codepen](https://codepen.io/lei-yi-jie/pen/LYdWjrN) | | LHchien33#6232 | [Codepen](https://codepen.io/lin_chien/pen/JjLWrgL) | | SASIMI#5099 | [Codepen](https://codepen.io/sashimi1327/pen/oNqzjBj)| | 痴醉兔 |[Codepen](https://codepen.io/wei-nie/pen/BarWmPz) | | suihsilan#9485 |[Codepen](https://codepen.io/suihsilan/pen/PoRpOLz) | | 我是泇吟 #5189 | [Codepen](https://codepen.io/kljuqbxs/pen/qBorxWq) | | ajhappy#6488 |[Codepen](https://codepen.io/ajhappy5438/pen/KKoWQPY)| | 鉦勝 #8333 |[[Codepen]](https://codepen.io/atckmax823/pen/MWVpQVK)| | Chi#7605 | [Codepen](https://codepen.io/YoChi84/pen/ZExerNL) | | peter#0 |[Codepen](https://codepen.io/JIAN-RONG/pen/PoRpeBO?editors=1100) | | RayChen#6088 | [Codepen](https://codepen.io/raychen1996/pen/gOemzVv) | | leeli#6243 | [Codepen](https://codepen.io/leelilee/pen/JjLWvqX) | | Fanglin#4054 | [CodePen](https://codepen.io/flynn841028/pen/bGvqvYe) | | YU #0618 | [CodePen](https://codepen.io/yoken_/pen/yLKMKJM) | |楓之聲#6945|[codepen](https://codepen.io/sshane258/pen/poLeKEM) | |yu魚#1330 | [CodePen](https://codepen.io/Yu_yu/pen/jOzBzpw)| |ssozr#4680|[codepen](https://codepen.io/ssozr/pen/WNzpKrr)| |Pony#6778|[codepen](https://codepen.io/Pony0303/pen/gOemjvb)| |Joyce#3790|[codepen](https://codepen.io/joycehuang/pen/eYMvVqv?editors=1100)| | Jason1#2538 | [CodePen](https://codepen.io/jotwxezb-the-encoder/pen/KKoWxwQ) | | 咻蹦#1526 | [CodePen](https://codepen.io/emmasyu/pen/KKoWBLy?editors=1100)| | Mylène#2481 |[Codepen](https://codepen.io/hamajibashi/pen/jOzBvPY)| |Shuo#1596 | [Codepen](https://codepen.io/chiangchungshuo/pen/mdxWzRx)| |小白#2406|[Codepen](https://codepen.io/gracewhite/pen/qBorvRy)| |jin.huang#4666|[Codepen](https://codepen.io/HJ7878/pen/RwMpmrj?editors=1100)| |Amberhh#2465|[Codepen](https://codepen.io/Amberhh/pen/bGvqyYZ?editors=1100)| |Arista#5802|[Codepen](https://codepen.io/arista-hsieh/pen/ZExedGL)| |Ryan Chiang#6649|[Codepen](https://codepen.io/ryanchiang/pen/rNdyEjG)| |紙飛機#1335|[Codepen](https://codepen.io/paperplanea/pen/abYJgKj)| |mickey#8745|[Codepen](https://codepen.io/weizhetseng/pen/xxWqoyy)| |Vera#5592|[Codepen](https://codepen.io/skvera/pen/ZExegpM)| |Yuna Huang#2692|[Codepen](https://codepen.io/Yuna1002/pen/qBoreXB)| |kevin6131 Huang#2692|[Codepen](https://codepen.io/kun8349/pen/NWYpQLM)| | EmilyLin#0526 |[Codepen](https://codepen.io/c199615/pen/rNdmaJR)| |Ron Liang#7277|[Codepen](https://codepen.io/ron-go/pen/bGvWNdW)| |Van.CS|[Codepen](https://codepen.io/fbacojji-the-selector/pen/rNdmVPW)| |toshow#5609|[CodePen](https://codepen.io/toshow/pen/poLPJYj)| | Yuan962#5897 | [Codepen](https://codepen.io/Jasmine-Liao/pen/NWYjNxO)| | IreneY #0086 |[Codepen](https://codepen.io/HalfPlannedJourney/pen/zYWwBGz)| |鴨鴨#9822|[Codepen](https://codepen.io/qrvrqvxv-the-selector/pen/GRxmqLJ)| |Sentiment#4883|[codepen](https://codepen.io/Sentiments/pen/QWmvERv) |jeter#8014|[codepen](https://codepen.io/gi-tai-she/pen/GRxmyXW?editors=1100) | 瑞瑞#4605 |[codepen](https://codepen.io/tsai-li-ting/pen/gOeWeLy) | WEI#0797|[codepen](https://codepen.io/pen/) | 狸貓#5863 | [Codepen](https://codepen.io/tanuki320/pen/BarRPej)| | NeilLin#3009 | [Codepen](https://codepen.io/a0071421/pen/rNdmoYQ?editors=1100)| |得源#8355|[CodePen](https://codepen.io/aglgvsie/pen/PoRmVvx)| |bakiii|[Codepen](https://codepen.io/aki168/pen/rNdwMpZ)| |GARBO#6659|[Codepen](https://codepen.io/garbo8130/pen/wvmegdL)| |艾草#4830|[Codepen](https://codepen.io/jmkhsutp/pen/xxWrgrP)| |Vian#7338|[Codepen](https://codepen.io/vianwu31/pen/ExEXoEG?editors=1100)| |yuchenye#6119|[Codepen](https://codepen.io/yuchen/pen/YzaQaZv)| |Tori#1248|[Codepen](https://codepen.io/FlyTori/pen/bGvRywL)| |艾芮絲#6060|[Codepen](https://codepen.io/wangyingju/pen/NWYgVYB)| |Nini Chen#5790|[Codepen](https://codepen.io/ninistyle/pen/zYWzVWw)| |肉魚#2149|[Codepen](https://codepen.io/zoechen13/pen/NWYgZZG)| |hua#9099|[Codepen](https://codepen.io/LHua/pen/yLKoOqw)| |Deborah#0033|[Codepen](https://codepen.io/deborah-tsai/pen/xxWLmKp)| |阿蘇#8351|[Codepen](https://codepen.io/susu3131/pen/xxWLmrz)| | Fang #4680 | [Codepen](https://codepen.io/std95174/pen/RwMZmrr?editors=1100)| |熊二#3824|[CodePen](https://codepen.io/BeckLai/pen/yLKzLam)| | 柏PO #5617| [CodePen](https://codepen.io/apo_1798/pen/ZExXGMP)| | kancheng#3915| [CodePen](https://codepen.io/kancheng/pen/qBoVmNg)| | YaWen #2752| [CodePen](https://codepen.io/yuwendy/pen/oNqodGq)| | Carrie #2750| [CodePen](https://codepen.io/carrie-wang/pen/LYdOKMx)| | mei#8421| [CodePen](https://codepen.io/Shila-Chen/pen/JjLMjGP)| | Susie(軒)#6181| [CodePen](https://codepen.io/Codeleaf/pen/rNdpOPN)| | ROKA #4051| [CodePen](https://codepen.io/chengchiaoyi/pen/gOeozwK?editors=1100)| | rueee #7997| [CodePen](https://codepen.io/Jull-C/pen/qBoxrQX)| | Jumpye#8601| [CodePen](https://codepen.io/Jumpye/pen/VwXQRRa?editors=1100)| |sophiee#7015|[codepen](https://codepen.io/sophiee2727/pen/XWEZLww) |Manson許#2295|[codepen](https://codepen.io/oupbzfxq-the-scripter/pen/ExEEKob) |鎔瑄#8578|[Codepen](https://codepen.io/barbarayou/pen/LYddmPE) | |Gui#9571|[CodePen](https://codepen.io/guitimliu/pen/NWYBNWY)| |Bonnie邦妮#7529|[CodePen](https://codepen.io/Calista316/pen/QWmJpaj)| |Rena#6249|[CodePen](https://codepen.io/aureate0116/pen/abYQqwQ)| |NathanJames#8120|[CodePen](https://codepen.io/ufo060204/pen/OJvavWz)| |RuoAn#7124|[CodePen](https://codepen.io/LiauRuoAn/pen/jOzQXBO)| |skypassion5000#4151|[CodePen](https://codepen.io/skypassion5000/pen/YzadjQW?editors=1100)| |KT Hsieh#2861|[CodePen](https://codepen.io/KTHsieh/pen/XWqbVKJ)