---
tags: 網頁切版直播班 - 2021 夏季班
---
{%hackmd theme-dark %}
# 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)（可只做背景圖的部分，文字部分可以省略）

## Result
**Ans: [CodePen 連結](https://codepen.io/jeffhung/pen/BaRpgJV)**