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

# 背景圖案教學

* vh 單位介紹
* [background](https://www.w3schools.com/css/css_background.asp) 常用語法
* background-image
* background-color
* background-repeat
* background-position
* [多重背景](https://codepen.io/hexschool/pen/vYdWYXB)設置
* [background](https://developer.mozilla.org/zh-CN/docs/Web/CSS/background) 縮寫
* [position 藏起來](https://codepen.io/hexschool/pen/vYdWYmY)
* 實做 banner 第一顆球的兩種作法
* [用背景圖案，手機版時隱藏 header，顯示在下個區塊](https://codepen.io/hexschool/pen/jOZaOLG)
* [用絕對定位作法](https://codepen.io/hexschool/pen/RwQjwyr)
* [學員背景處理](https://chalk-freedom-ec6.notion.site/b7c8b8022d834be988c578a077904b1f?v=26f66e55fbdf49998c63fba943025020)
* 還有時間的話，來實做 hero banner

## 圖片網址
* [網址](https://github.com/hexschool/webLayoutTraining1st/tree/master/chatTalker_images)

## 補充教學

* [background-size：cover 的妙用](https://youtu.be/1EYUsAlVqY0?t=577)
* [背景每日任務](https://hackmd.io/UYD08C_jRxODb5OvqhK9ZA?both)
## 快閃三小時活動

* [活動連結](https://hexschool.tw/r0kt6)
* 訂閱 Line@ 專屬提醒，時間快到時會提醒通知您：👆[https://r.botbonnie.com/UF8u3](https://r.botbonnie.com/UF8u3)👆