background-position 用來(lái)定義背景圖片位置，是 CSS background 的屬性之一，常與 background-image、background-repeat 搭配設(shè)計(jì)，讓網(wǎng)頁(yè)背景圖片靠上、下、左、右甚至是置中顯示，設(shè)計(jì)時(shí)需使用水平與垂直方向的位置，可以給數(shù)字、百分比或方向參數(shù)，讓圖片能夠在正確的位置呈現(xiàn)，background-position 是標(biāo)準(zhǔn)的 CSS 背景位置設(shè)計(jì)方法，所有的主流瀏覽器都支持 background-position。

background-position 基本語(yǔ)法

background-position: 背景圖片水平位置參數(shù) 背景圖片垂直位置參數(shù) ;

通常使用水平方向以及垂直方向的組合來(lái)定義背景圖片呈現(xiàn)的位置。例如「background-position:left top;」這樣代表背景圖片靠左上角對(duì)齊，除此之外，還可以使用「靠左與靠上的距離」以及「靠左與靠上的百分比」來(lái)設(shè)計(jì)，示例還會(huì)詳細(xì)說(shuō)明。

可以使用的方向參數(shù)

示例一、各種對(duì)齊方式

background-position:right bottom;　// 靠右靠下對(duì)齊

background-position:30px 60px;　//靠左 30px 靠上 60 px 的位置

background-position:10% 50%;　// 靠左 10% 靠上 50% 的位置

background-position:10%;　// 效果同上一行，靠左 10% 靠上 50% 的位置

以上示例要確保正確顯示，需搭配 background-repeat:no-repeat 告訴瀏覽器背景圖片不要重覆顯示。特別要注意的是，如果使用了簡(jiǎn)化寫(xiě)法，只寫(xiě)一個(gè)屬性值，另一個(gè)屬性值將會(huì)自動(dòng)取中間值，為了將來(lái)管理方便，建議兩個(gè)方向的屬性值都寫(xiě)上去比較好。

示例二、垂直置中對(duì)齊

body{

　background-image:url('背景圖片');　//先給你想要放在背景的圖片路徑或網(wǎng)址

　background-repeat:no-repeat;　//背景圖片不要重覆顯示（僅顯示一次）

　background-attachment:fixed;　//背景圖片位置固定

　background-position:center;　//背景圖片水平位置與垂直位置均置中對(duì)齊

}

垂直置中算是比較特別的一種寫(xiě)法，只需要寫(xiě)一個(gè)屬性值 center 即可，因?yàn)榱硗庖粋€(gè)方向會(huì)自動(dòng)取中間值。示例將背景圖片的位置設(shè)為固定（background-attachment:fixed）的主要原因是讓鼠標(biāo)上下滑動(dòng)的時(shí)候，背景圖片不會(huì)跟著被移動(dòng)，不過(guò)這樣的效果只適用在網(wǎng)頁(yè)背景或是 textarea 這類網(wǎng)頁(yè)元素中，在 DIV 區(qū)塊內(nèi)使用并沒(méi)有太大的意義。另外，background-position 不只是單純的用來(lái)設(shè)計(jì)網(wǎng)頁(yè)背景圖片位置，也能用來(lái)設(shè)計(jì) DIV 區(qū)塊內(nèi)的背景圖片位置，用法是一樣的。