藍 色 憂 鬱

一、CSS圖片設定

background-image: url(這裡放圖片網址/路徑);

CSS的背景圖片預設會重複到該區塊滿版，這個方法比較適用於重複的幾何圖案或是漸層圖案。

我故意用一張小小的logo圖案來做測試，其實蠻噁心的><

程式碼展示如下：

See the Pen by phoebe (@blue921010) on CodePen.

二、設定背景不重複

如果不想要像第一個範例那樣背景重複，背景會預設放在左上角的位置(可將下面的code貼到上面的codepen CSS裡面就可以測試囉)，可以用

background-repeat: no-repeat;

如果希望可以左右重複，可以下

background-repeat: repeat-x;

如果希望上下可以重複可以下

background-repeat: repeat-y;

三、背景位置

如果我想要的那張背景圖片可以靠正中間怎麼做?

background-position：center center;

center center的參數可以自己改成 top、bottom，或是趴數 50% 50%、像素10px 20px等等的，依照你的需求調整比例。

四、背景顏色：單一顏色

如果我只是想要單純的背景顏色要怎麼用呢?

background-color：色碼;

五、背景顏色：漸層顏色

漸層我認為不好做，原因不是程式碼難寫，而是因為我不會挑顏色，所以我推薦https://webgradients.com/ 這個網站，有好多好多漂亮的漸層顏色可以挑，就別花時間自己做了。

六、小孩子才選擇，我全都要

你可以同時設定背景圖案、背景顏色、背景位置，一行程式碼搞定，例如：

background: url('圖片網址') repeat-x center center 色碼;

這些參數的順序是可以自由調換的。