background-position 背景位置指的是背景圖片的位置而非色彩位置，所以切記！使用這個屬性時，請記得搭配 background-image 使用，而此指的位置是水平 X 軸與垂直 Y 軸的位置，並沒有前後Z軸層級的位置，所以無法利用這個屬性來控制背景圖片的前後，background-position 的語法規則如下：
background-position: left top;
background-position 可以使用的值有數值與關鍵字，並且部分的值可以合併混用，background-position 可以使用的值有以下幾種
background-position 預設是以左上角為起點，如果我們把畫面分割成 X 與 Y 軸，X 代表水平軸，方向則是由左至右為正數，反之在左側往左側移動則為負數。Y 軸表示垂直軸，方向則是由上至下為正數，反之在上方還要往更上方移動則為負數。而座標概念是當你採用數值類型的值時產生效用的，若使用關鍵字的話，有時反倒簡單許多。
background-position 使用關鍵字時需要特別注意一個軸向僅使用一個值，，也就是說不會出現下面這種原始碼
background-position: left right;
或
background-position: top bottom;
background-position 使用關鍵字時，可以不需要同時設定兩個軸向，例如以下原始碼可以讓背景圖片水平垂直居中於該容器中
background-position: center;
而以下原始碼則會讓背景圖片「水平靠左，垂直居中」
background-position: left;
以下原始碼則會讓背景圖片「水平靠右，垂直居中」
background-position: right;
以下原始碼則會讓背景圖片「水平居中，垂直靠上」
background-position: top;
以下原始碼則會讓背景圖片「水平居中，垂直靠下」
background-position: bottom;
看了以上的例子，是不是發現了些甚麼？背景圖片位置少了一個軸值的話，預設就是 center 啊！這樣對於省 code 來說，又能偷懶了！當然 Amos 還是會建議各位寫清楚一點好啦，畢竟如果瀏覽器改了個預設值的話，哪天被瀏覽器弄到畫面跑掉倒是真的很冤啊！所以還是建議兩個軸都寫清楚一點，像是下面這樣或比較好啦
background-position: left bottom;
或
background-position: right bottom;
或
background-position: center top;
依此類推自己發揮吧！
前面有提到過 background-position 的值，可以關鍵字與數值混用，所以表示我們可以同時間設定數值與關鍵字，就像下方這樣
background-position: 50px top;
上面這樣的寫法，會讓你的背景圖片位於容器物件的上方貼頂，圖片左緣離容器左方邊緣 50px 的位置。那麼我們如果採用以下兩種寫法的話又會如何呢？
寫法一
background-position: 50px center;
寫法二
background-position: center 50px;
答案是寫法一的圖片位置會在離容器左側 50px 位置並垂直居中，寫法二的圖片位置則會水平居中，並離容器頂端 50px 位置，有猜到是怎麼一回事嗎？實際上 background-position 的值，只要你的值不是 center 這個關鍵字，那就是看你撰寫的關鍵字是否為 X 軸的關鍵字，若 background-image 的第二個值是 X 軸的關鍵字的話，那麼第一個值就會被辨識為 Y 軸，但若是有出現 center 這個關鍵字的話，你的值就會依照 X 先 Y 後這樣的順序去解讀，各位開發者可千萬不能不注意喔。
新手由於觀念不是很紮實，所以使用 background-position 時，還是有些事情需要特別提醒一下，避免寫了一些讓自己很混亂的 code，以下建議就給新手們看看囉
以上就是今天的金魚都能懂的 CSS 必學屬性，大家好好去玩看看吧！
「金魚都能懂的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鐵人賽
看影片追技術