---
tags: 網頁切版直播班 - 2021 夏季班
---
# 7/12(一) 每日任務

## 認識 CSS 語法 background-image

通常會用來設定背景圖片，用法如下：

<div class="image"></div>

.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**

如果圖片太大則會出現這樣的畫面

什麼都看不到XD

要調整他的位置可以使用 `background-position`
> top ｜ bottom ｜ left ｜ right ｜ center

     background-position: center;


* **background-size**
但是原圖並沒有這麼大，所以使用 `background-size` 調整

> auto ｜ contain ｜ cover

    background-size: contain;


background-size 改用 cover 查看兩者的差別。
> contain 是在不超過原圖的大小前提下等比縮小
> cover 是等比例縮放，讓圖片可以蓋滿元素寬高。

    background-size: cover;


* **background-repeat**
背景圖片重複的問題，為了不讓他重複所以要使用 `background-repeat` 設定

> repeat(預設值)｜ repeat-x ｜ repeat-y ｜ no-repeat
>

    background-repeat: no-repeat;


**完整程式碼**

<div class="image"></div>

.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/AliceChiang/pen/WNxGvJB)（可只做背景圖的部分，文字部分可以省略）

## 回報流程

1. 將答案寫在 Codepen 並複製 Codepen 連結貼至「回報區」中回報就算完成了喔～今天的解答就是上方範例喔～


回報區
---
<!-- 0. Bingbingboom（回報範例，請使用註解回報）
Codepen：https://codepen.io/Bingbingboom/pen/zYZRpMN
-->

<!-- 1. 焦糖
Codepen: https://codepen.io/yen-kg/pen/bGqvyPE
-->
<!-- 2.孫https://codepen.io/Sunne/pen/OJpqWYx -->

<!-- 3.natsu
codepen: https://codepen.io/natsu19/pen/qBmNavd -->

<!--4.Jasmin

codepen:https://codepen.io/thejasmin/pen/gOgaxyV?editors=1111
-->

<!--5.Alpha
codepen:https://codepen.io/alphatero/pen/eYWBYzp
-->

<!-- 6.肉鬆
codepen: https://codepen.io/klrkicog/pen/ZEKBEOG
-->

<!-- 7. Vic
codepen: https://codepen.io/hsuan333/pen/XWRNWKd
-->

<!-- 8. Riley
codepen: https://codepen.io/jjpxbprd/pen/MWmbWpw
-->

<!-- 9. Lina Chen
codepen: https://codepen.io/LinaChen/pen/jOmVOVj
-->
<!-- 10 陳sam
codepen:https://codepen.io/euldpliv/pen/OJmbJWa
-->

<!-- 11 lumei
codepen:https://codepen.io/l_umei/pen/vYmyYgR?editors=1100
-->

<!--12 Yen
codepen: https://codepen.io/Hoyi/pen/qBmqBjX
-->

<!--13 Jean
codepen: https://codepen.io/jean-liu/pen/yLbVLJB
-->

<!-- 14 sarah
codepen:https://codepen.io/sarah-wang/pen/WNjoNqv?editors=0100
-->

<!-- 15 Dory
codepen:https://codepen.io/dorihung/pen/WNjoNgN
-->

<!-- 16. 蔡明達
codepen: https://codepen.io/bmzpfyxe/pen/xxqaNmZ?editors=1100
-->

<!-- 17. Sz
codepen: https://codepen.io/szyln/pen/zYwoxGP
-->

<!-- 18. Sam Li
codepen: https://codepen.io/sam830623/pen/mdmOdpG
-->

<!-- 19. Joy Cheng
codepen: https://codepen.io/joycheng5432/pen/gOWLOEy
-->

<!-- 20. 吐司
codepen: https://codepen.io/danielle-zhang/pen/RwVRRbY
-->

<!-- 21. Cora
codepen: https://codepen.io/chakrafiregirl/pen/dyWOyxq
-->

<!-- 22. 大衛
codepen: https://codepen.io/exnsrpjc/pen/XWRNJjV
-->

<!-- 23. 群嘉
codepen: https://codepen.io/efzdamnp-the-lessful/pen/GRmNgjV
-->

<!-- 24. Ryan
codepen: https://codepen.io/RyanYD/pen/ExmNavR
-->

<!-- 24. kane0927
codepen: https://codepen.io/kane-lin/pen/WNjobpG?editors=1100
-->

<!-- 25. Eric-小偉哥
codepen: https://codepen.io/ericLoveDesign/pen/poPNveP
-->

<!-- 26. Yao Lin
codepen: https://codepen.io/yaoyaoiii/pen/JjNbobB
-->

<!--27. Cheng Pei-hsuan
codepen: https://codepen.io/PaCheng/pen/bGWBNLw
-->

<!-- 28. 周周
codePen: https://codepen.io/jhoujhou-the-decoder/pen/gOWLbrV -->

<!-- 29. Jemma
codePen: https://codepen.io/Jemma9/pen/XWRNJVq -->

<!-- 30. Xing
codePen: https://codepen.io/xing10/pen/GRmNgXp -->

<!-- 31. Winnie
codePen: https://codepen.io/winnie0208/pen/oNWYgGm -->

<!-- 32. Cate Chang
codePen: https://codepen.io/tutz/pen/JjNborm -->

<!-- 33. WilsonHan
codePen: https://codepen.io/wi0821/pen/bGWBNXR -->

<!-- 34. Kaka
codePen: https://codepen.io/potatokaka/pen/zYwoGYe -->

<!-- 35. ZY Hsu
Codepen:
https://codepen.io/zihyin/full/ExmNaBr -->

<!-- 36. 雷古娜
Codepen:https://codepen.io/tinahopo/pen/KKmNwYZ -->

<!-- 37. huanan
Codepen:https://codepen.io/hua_nan/pen/mdmOJVr -->

<!-- 38. Jun Chan
Codepen:https://codepen.io/chujunchan/pen/qBmqEez -->

<!-- 39. Karen Huang

Codepen: https://codepen.io/Coding_Snorlax/pen/eYWBNEX -->

<!-- 40. Gui
Codepen: https://codepen.io/guitimliu/pen/gOWLpVe
-->

<!--41. yijun
codepen: https://codepen.io/sandy3068/pen/MWmbaOa
-->

<!--42. winnie
codepen: https://codepen.io/hsuanyu0115/pen/JjNbYvr -->

<!--43. Gill
codepen: https://codepen.io/Gill-Chin/pen/JjNbYBr?editors=1100 -->

<!-- 44. 阿熊
codepen: https://codepen.io/winnie0208/pen/oNWYgGm -->

<!-- 45. 阿和
codepen: https://codepen.io/shnny/full/jOmVWMM -->

<!-- 46. peter.chen1024
codepen: https://codepen.io/JIAN-RONG/pen/yLbVeJM?editors=1100 -->

<!-- 47. 粘勝凱
codepen:
https://codepen.io/szykttdy/pen/LYybGJv
-->

<!-- 48. Elaine Liu
codepen: https://codepen.io/elaine7598/pen/poPNygV
-->

<!-- 49. Archie
codepen: https://codepen.io/WuChengHua/pen/ZEKBWQq
-->

<!-- 50 icy
codepen: https://codepen.io/ccsbjzze-the-sasster/pen/rNmWewR-->

<!-- 51 Tina Yen
codepen: https://codepen.io/tlorfrnl-the-typescripter/pen/poPNyPO
-->

<!-- 52： RitaHuang
https://codepen.io/Rita-Rossweisse/pen/eYWBJdG?editors=1100
-->

<!--53 Peggy Tsai
https://codepen.io/pei-chi-tsai/pen/xxdRVMZ
-->

<!-- 54 Nate Lu
偷偷加了一個 background-attachment: fixed; 進去
向下滾一下，可以感受不同之處。
https://codepen.io/nate12/pen/LYybZYx
-->

<!--55 叻叻豬
https://codepen.io/ericxcode/pen/GRmNqpx
-->
<!--56.阿瓜
https://codepen.io/hoick/pen/eYWzLpM -->
<!--57.童筱涵
https://codepen.io/hsiaohan/pen/QWvGEdR -->
<!--58.anna
https://codepen.io/annhys/pen/XWRNKJb -->
<!--59.Joanna Chang
https://codepen.io/polilu1985/pen/jOmVVKv
-->

<!-- 60. hellocrab
https://codepen.io/hellocrab/pen/ZEKBLEz
-->

<!-- 61. ellie
https://codepen.io/hsu-yu/pen/bGWBgrZ
-->

<!-- 62. 格可
https://codepen.io/catabo/pen/qBmqRXj
-->

<!-- 63. Annie
https://codepen.io/lhohdalu/pen/PombWrv
-->

<!-- 64. 黃小瑄
https://codepen.io/5quvgp2z/pen/RwVoKOq
-->

<!-- 65. Summer.H
https://codepen.io/wan-chine/pen/qBmqrbK
-->

<!-- 66. Irene Wang
https://codepen.io/irene-wang-the-looper/pen/XWRNMRV
-->

<!-- 67.黃士桓
https://codepen.io/shr-huan-huang/pen/Pombpmo
-->
<!-- 68. Paisley Chien
https://codepen.io/canaerkk/pen/qBmqmqW
-->

<!-- 69. Katie Zhao
https://codepen.io/katiezhao/pen/LYybygN
-->

<!-- 70. Fleur
https://codepen.io/swwlee/pen/JjNbyEZ
-->

<!-- 71. shanhlin
https://codepen.io/rmovuagr-the-selector/pen/KKmNXZB
-->

<!-- 72. Froel
Codepen: https://codepen.io/Froel/pen/RwVoxdN
-->

<!-- 73. stepha
https://codepen.io/w1112yb/pen/YzVpYMK
-->

<!-- 74. 沈依蓉
https://codepen.io/lily-oa/pen/QWvGqar
-->

<!-- 73. YuriT
CodePen: https://codepen.io/wenfisht/pen/OJmbXrG
-->

<!-- 74. SihLe Huang
code: https://codepen.io/bugbug777/pen/oNWYaQx?editors=1100
-->

<!-- 75. 林雨樞
code: https://codepen.io/FISH0701/pen/eYWBpRJ
-->

<!-- 15. Scarlett史嘉
Codepen:https://codepen.io/qoxttdjg-the-encoder/pen/wvdoQXO?editors=1100
-->
<!--77. LTL
codepen:https://codepen.io/ltlin93/full/rNmWPjQ
-->
<!--78. rose
codepen:https://codepen.io/roseling30/pen/oNWYJEJ
-->

<!--79. sans-ge
Codepen:https://codepen.io/Sans-ge/pen/XWRNOZQ

<!-- 82： 魚魚
https://codepen.io/YuYu_29/pen/jOmVdGz
-->
<!-- 83. Shani
https://codepen.io/ShaniMa/pen/yLbVwpL-->

<!-- 84.Page
https://codepen.io/kanawin821/pen/JjNbzqr
-->

<!-- 85.ZOE
https://codepen.io/Zoechiueh/pen/eYWBXKJ?editors=1100
-->

<!-- 86.PHIL
https://codepen.io/ctkeftjp-the-animator/pen/XWRNQpe
-->

<!-- 87.jimmyFang
https://codepen.io/pohxiqqo/pen/YzVpMxB
-->

<!-- 88.Sylvia-H
https://codepen.io/Cosmosheart/pen/poPNBWR?editors=1100
-->

<!-- 89.Coco
https://codepen.io/coco35532442/pen/MWmbRMQ
-->

<!-- 89.Meng
https://codepen.io/MGHN/pen/xxdZmKN?editors=1100
-->

<!-- 90.Una(點子數位)
https://codepen.io/xbsapbas-the-vuer/pen/ZEKBgyK
-->

<!-- 91.Carol LEE
https://codepen.io/chiashiunlee/pen/QWvGeJd
-->

<!-- 92. Zaii Hsu
https://codepen.io/ivy2846357/pen/WNjRvPJ?editors=1100 -->

<!-- 93. Zaii Hsu
https://codepen.io/xtsjrjdv/pen/GRmroQb -->

<!-- 94. Tracy曼娟
https://codepen.io/tracychien-the-encoder/pen/WNjRrqR
-->

<!-- 95. Carol Li
https://codepen.io/carolli834/pen/vYmgGaK?editors=1100
-->

<!-- 96. Alvin Chu
https://codepen.io/wave99487chu/pen/VwbPWrz
-->

<!-- 97. will
https://codepen.io/will-liu/pen/QWvdMwW?editors=1100
-->

<!-- 98. Freya
codepen:
https://codepen.io/iyowai/pen/vYmgRgZ?editors=1100
-->
<!--99,yellamoon 巫樾
[codepen](https://codepen.io/pwbzvqja/pen/JjNEZEz)
-->

<!-- 100. Tansy
codepan: https://codepen.io/subarashii-huch09/pen/ZEKLRZV
-->

<!-- 101. 鉦勝
codepan: https://codepen.io/subarashii-huch09/pen/ZEKLRZV
-->

<!-- 102. Erin Huang
codepan: https://codepen.io/ErinHuang/pen/qBmRQvm
-->

<!-- 103. Jocelyn
codepen: https://codepen.io/enjoyful/pen/mdmRevj?editors=1100
-->

<!-- 104. Jim Hwang
codepan: https://codepen.io/jimh1129/pen/eYWgbPE
-->

<!-- 105: valerie
codepan: https://codepen.io/vicky-chang/pen/VwbPqEq?editors=1100
-->
<!-- 106: [Jeff H](https://hackmd.io/@jeff14994/H10xDlBq_/https%3A%2F%2Fhackmd.io%2F%40jeff14994%2FS1gzIsl6u%2F%252FFF7y1GkvRZG9GoZCOdFZ0A)-->

<!-- 107: Charles
codepan: https://codepen.io/gemini9160/pen/YzVZwBB
-->

<!-- 108: YOYO
codepan: https://codepen.io/lumedkle/pen/gOWmMEK
-->

<!-- 109: AKI
codepen:
https://codepen.io/akichen27/pen/BaRWLNv
-->

<!-- 110: Yurie
codepen:
https://codepen.io/_u_jung/pen/NWjpbpd
-->

<!-- 111: Jamie
codepen:
https://codepen.io/JamieChenWs/pen/oNWZeNe
-->

<!-- 112: Calon
Codepen: https://codepen.io/Calon0118/pen/VwbpyGG
-->

<!-- 113: Ruby Chiang
Codepen: https://codepen.io/rubyyl0701/pen/vYmxRQJ
-->

<!-- 114. 黃羽均
codepen:
https://codepen.io/azzfgtpo/pen/zYwZbRO
-->
<!--115.袁祥恩
https://codepen.io/ovfxsavp-the-bashful/pen/zYwZbMx?editors=1100 -->

<!-- 116. Tori
codepen: https://codepen.io/hayen/pen/KKmWXGZ?editors=1100
-->

<!-- 117. Pocky
codepen: https://codepen.io/lightfish311/pen/qBmmZPQ?editors=1100
-->

<!-- 118. axlrock1021
codepen: https://codepen.io/lnjbmmxo/pen/jOmmGmV
-->

<!-- 119. Joe Kuo
codepen: https://codepen.io/alertislow/pen/PommEjd
-->

<!-- 120. Zooey Cheng
codepen: https://codepen.io/noraneko0430/pen/dyWWwyN?editors=1100
-->

<!-- 121. Ning
codepen: https://codepen.io/fangninglin/pen/oNWWrWN
-->

<!-- 122. Blake Hung
codepen: https://codepen.io/Blakehong/pen/LYyjWgx
-->

<!-- 123. 三隻小貓
codepen: https://codepen.io/bagelover/pen/XWReJwJ
-->

<!-- 124. 陳品宏
codepen:
https://codepen.io/wtka/pen/rNmGGOa
-->

<!-- 125. Min Chun Tsai
codepen: https://codepen.io/Tsai0926/pen/abWEYbB
-->

<!-- 126. irene
CodePen：https://codepen.io/lohas1107/pen/yLbjeGg?editors=1100
-->

<!-- 127.文文
https://codepen.io/chiawen81/pen/ExmLwdr
-->

<!-- 128.Newman
https://codepen.io/newmankz/pen/YzVveEM
-->

<!-- 129. WA
https://codepen.io/ldddl/pen/dyWKeEK
-->

<!-- 130. Jessie Cheng
https://codepen.io/JessieMosbi/pen/MWmXMgV
-->

<!-- 131. 聿凌
https://codepen.io/igzdflpu/pen/LYyXOMX?editors=1100
-->

<!-- 132. twoz
https://codepen.io/twoz/pen/jOmjXyX?editors=1100

<!--133. keep
https://codepen.io/keep-/pen/powybMm -->
-->

<!-- 134. Eason
https://codepen.io/alanwu0828/pen/wverLMd
-->