# 背景
###### tags: `NKFW 網頁設計入門`
* background-color
* background-image
* background-position
* background-repeat
* background-attachment
* background-size

## 假圖好朋友：Lorem picsum

https://picsum.photos/

## background-color
:::info
調整背景顏色
:::

顏色有三種表示方法
* 英文名稱
* 例：red ,blue......
* rgb(red,green,blue)
* 例：rgb(255,0,0) 為紅色
* 色碼表
* 例：#000000 為黑色
* [色碼表](https://www.ifreesite.com/color/)

:::warning
注意!!!
* 當賦予body或html背景顏色時會默認為整個視窗
* 當同時賦予body和html背景顏色時視窗背景顏色會是html的，而body的則會以body的尺寸呈現
:::

## background-image
:::info
放背景圖片
:::
* background-image : url("圖片連結網址")
* 例：

    body {
        background-image : url("https://picsum.photos/id/684/600/400");
    }

* 完整畫面呈現如下

## backgreound-repeat
:::info
設定背景圖片是否要重複
:::

* background-repeat : repeat;
* 用同一張照片將背景補滿(預設)
* background-repeat : no-repeat;
* 不重複背景圖片 例：

    body {
        background-image : url("https://picsum.photos/id/684/600/400");
        background-repeat: no-repeat;
        }

* 完整畫面呈現下

## background-position
:::info
設定背景位置
:::

* 設定值可以是方位
* left
* right
* top
* bottom
* center
:::info
可一次選擇多個值。如果只選一個值，其他方向會自動默認center
:::
* 例：

    body {
            background-image : url("https://picsum.photos/id/684/600/400");
            background-repeat: no-repeat;
            background-position right bottom;
            }

* 畫面呈現如下

* 設定值也可以用 x% y%

* x 為水平 0~100
* 0% 靠左；100% 靠右
* y 為垂直 0~100
* 0% 靠上；100% 靠下
* 例：

    body {
            background-image : url("https://picsum.photos/id/684/600/400");
            background-repeat: no-repeat;
            background-position 25% 75%;
            }

* 畫面呈現如下

## background-attachment
* background-attachment : scroll
* 背景圖片可滑動(預設)
* background-attachment : fixed
* 背景圖片固定

## background-size
* 調整背景圖片大小
* background-size : auto
* 不改變圖片大小(預設)
* background-size : cover
* 調整背景圖片大小直到填滿所屬標籤 例：

## 範例：滿版背景
:::info
做一個滿版的背景，我們希望：
* 圖片放在正中間的位置
* 控制background-position
* 圖片不要失真，要維持原來的比例
* 控制background-size
* 當網頁內容很多的時候，網頁往下拉背景不會動
* 控制background-attachment
* 圖片不要重複出現
* 控制background-repeat
:::

body{
    background-image: url("https://picsum.photos/id/237/1600/900");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

或是

body{
background: 
    url("https://picsum.photos/id/237/1600/900")
    center / cover
    no-repeat
    fixed;
}


儘管我們做了很多設定，但是有時候背景還是會跑掉，看起來不像我們想要的樣子，原因像是：
* 圖片原來的解析度太小，放大後會糊掉
* 圖片的比例跟設備尺寸不合，所以放大的時候會被切掉某些部分

## 範例：固定的背景
:::info
做一個固定的背景，上方是文字區塊，當網頁往下拉的時候背景不會動。
:::

## Project (或是範例？)
:::info
要怎麼樣才能放好一張背景圖片？這個問題真的蠻難的唷
試試看做一個滿版背景，正中間放一些文字
:::