background-size如字面所示，主要用途是設定背景圖片的尺寸，background-size可以使用數值或關鍵字設定，並可以設定一至兩個值，倘若是需要做到多重背景的話，則可利用「,」半型逗號來區隔更多組值，其語法如下
background-size: 100% 100%;
background-size 是一個 CSS 新手必學的屬性，不管是在RWD或是一般非RWD網站中都經常被使用，background-size 可以使用的值有以下幾種
background-size 是對背景圖片設定其尺寸，所以必須要搭配 background-image 來使用，所以當你沒有設定 background-image 的時候是沒有作用的，此外 background-color 也無法使用 background-size 來指定其範圍，請新手們千萬注意。
background-size 設定數值的方式，可以讓你直接指定背景圖片的大小，其原理如下所示
background-size: 寬度 高度;
這表示如果我們的圖片太大張的話，就可以利用這個方式來縮小他的尺寸了，對吧！？如果是這樣的話，這句話鐵定惹怒一堆業界前端的前輩啊！基本上在製作網頁時，Amos會建議使用你實際需要的圖片尺寸就好，不要利用background-size 去修改。
我們來假設一下你的圖片解析度超高，尺寸超大的，像是4000x2000這樣的尺寸，接著你希望他在頁面上呈現200x100的尺寸，就使用了 background-size: 200px 100px; 來設定，但這樣我直接把該圖片利用影像編輯軟體直接改成 200x100 就好了，這樣圖片的檔案大小會比原本的 4000x2000 還要小很多，相對的傳輸速度也快的多。
目前有許多人都喜歡使用滿版的背景來當作第一屏的畫面設計，這時候就會遇到一個問題是我的背景圖要怎麼設定？通常我們會把畫面先使用一個div(或其他標籤)容器，將其寬高都設定為 100% 或寬 100%，高 100vh，然後在該區塊中設定 background-size: 100% 100%; 表示背景圖片的尺寸要跟容器一樣大，但這時就很容易發生問題了，只要我的視窗一改變比例，像是高度不變下，由寬的變成窄的，你的圖片就會整個變形瘦身，因為百分比的設定方式，是採用整個物件寬高空間來當作百分比，一旦背景圖的寬高比例跟容器的寬高比例不同，這樣就會發生背景圖變形的情況，各位不得不千萬注意啊。
background-size 設定的關鍵字多數會使用到「cover」與「contain」兩種，有了前面百分比這樣的問題，這邊我們就不得不說使用關鍵字的好處了，針對兩個比較常用到的關鍵字，我們來了解一下他們的特性是甚麼。
cover 的特性是讓背景圖整個「不變形」、「寬高等比例」、「在必要時局部裁切」的鋪滿整個容器空間，所謂的鋪滿空間，表示空間中不會有出現背景色這樣的範圍存在，「在必要時局部裁切」指的則是當你的圖片寬高比例與容器寬高比例不同時，要讓圖片不留白的鋪滿整個空間，勢必有部分圖片會超出容器的範圍，這時超出的區域就會看不到，也就是被切掉了意思了。
多數的時候網頁開發者都會利用這個方式來達到滿版背景的視覺設計目的。所以別用 background-size: 100% 100%; 了，放心大膽的使用 background-size: cover; 吧。
contain 的特性是讓背景圖整個「不變形」、「寬高等比例」、「不可裁切」的鋪滿整個容器空間，跟「cover」有非常明顯的差異就在於他不裁切的特性，所以你的背景圖片會完整的呈現在你的容器中，老實說 Amos 目前的專案需求中非常少用到這個關鍵字，所以就...這樣，當有需要用到此特性時再來套用就好。
一般來說背景圖片的範圍預設都是在邊框線(border)以內，除非特別改變了 background-origin 的值，不然背景圖片的範圍只會在邊框線(border)內，請千萬注意喔。至於 background-origin 是做啥的...這個金魚們暫時不需要知道，畢竟算是比較少用到的屬性，就醬啦！
「金魚都能懂的CSS選取器」已集結成書，並於書中添加一些新篇章及細節補充，有興趣的朋友可至天瓏書局選購，感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw
讓我們好好善用CSS選取器吧
Line搜尋「@CSScoke」加入CSS可樂公開帳號，可以收到 Amos 第一手資訊喔
CSS 可樂部落格
CSS coke 的 Youtube 直播頻道
快按此訂閱 CSS coke 的頻道接收最新教學
iThome鐵人賽
看影片追技術