可以通過(guò)background-size屬性來(lái)設(shè)定背景圖片的大小。它可以是像素（px）或者是百分比(%)，舉例說(shuō)明：background-size:950px* 200px這表示把背景圖片大小調(diào)整為寬度950像素，高度200像素。

1、background-size的語(yǔ)法說(shuō)明：

(1)屬性名:background-size

(2)屬性值:其中 bg-size = [|| auto ]{1,2} | cover | contain

(3)初始值:auto auto

(4)應(yīng)用于:所有元素

(5)繼承性:無(wú)

(6)百分比:后面會(huì)說(shuō)明

(7)計(jì)算值:根據(jù)指定

2、代碼說(shuō)明：

/* 一個(gè)值: 這個(gè)值指定圖片寬度，第二個(gè)值為auto */

background-size: auto

background-size: 50%

background-size: 3em

background-size: 12px 

/* 兩個(gè)值: 第一個(gè)值指定圖片的寬度，第二個(gè)值指定圖片的高度 */

background-size: 50% auto

background-size: 3em 25%

background-size: auto 6px

background-size: auto auto

/*多重背景，用逗號(hào)隔開(kāi)，在CSS語(yǔ)法中凡語(yǔ)法后跟*或者#，都是可以無(wú)限重復(fù)的，但必須用逗號(hào)隔開(kāi)。 */

background-size: auto, auto     /* 請(qǐng)區(qū)別于background-size: auto auto*/

background-size: 50%, 25%, 25%

background-size: 6px, auto, contain

background-size: inherit

擴(kuò)展資料：

背景重復(fù)：

如果需要在頁(yè)面上對(duì)背景圖像進(jìn)行平鋪，可以使用 background-repeat 屬性。

屬性值 repeat 導(dǎo)致圖像在水平垂直方向上都平鋪，就像以往背景圖像的通常做法一樣。repeat-x 和 repeat-y 分別導(dǎo)致圖像只在水平或垂直方向上重復(fù)，no-repeat 則不允許圖像在任何方向上平鋪。

背景圖像將從一個(gè)元素的左上角開(kāi)始。如下：

body{background-image: url(/i/eg_bg_03.gif);  background-repeat: repeat-y;}

背景定位：

可以利用 background-position 屬性改變圖像在背景中的位置。

下面的例子在 body 元素中將一個(gè)背景圖像居中放置：

body{background-image:url('/i/eg_bg_03.gif');background-repeat:no-repeat;    background-position:center;}

為 background-position 屬性提供值有很多方法。首先，可以使用一些關(guān)鍵字：top、bottom、left、right 和 center。通常，這些關(guān)鍵字會(huì)成對(duì)出現(xiàn)，不過(guò)也不總是這樣。還可以使用長(zhǎng)度值，如 100px 或 5cm，最后也可以使用百分?jǐn)?shù)值。不同類型的值對(duì)于背景圖像的放置稍有差異。

對(duì)于圖片，首先我們先想到是背景圖片。因?yàn)槲覀冊(cè)S許多的裝飾都是用背景圖片來(lái)實(shí)現(xiàn)的。既然這樣，那么就從CSS控制背景圖片講起吧。
1.CSS控制背景圖片：
對(duì)于一個(gè)網(wǎng)頁(yè)，我們開(kāi)始設(shè)計(jì)的時(shí)候，可能沒(méi)有過(guò)多的去想背景圖到底是什么，因?yàn)榇蠖喽际窃O(shè)計(jì)背景色就可以了，原因嗎，我想也很簡(jiǎn)單，因?yàn)樗c前景音樂(lè)一樣，對(duì)于網(wǎng)頁(yè)的打開(kāi)，速度會(huì)有一定的影響。不過(guò)對(duì)于一般的個(gè)人網(wǎng)站，或者個(gè)人博客而言，它對(duì)展現(xiàn)自己的個(gè)性，當(dāng)然是不可或缺的了，當(dāng)然什么都不會(huì)太過(guò)完美，有好就有壞，也就是當(dāng)圖像不可用但CSS可用的時(shí)候，替換內(nèi)容就不會(huì)顯示出來(lái)，因此，并不建議在導(dǎo)航按鈕文本或類似的情況中使用CSS背景圖片。
控制背景圖片的CSS屬性有很多，只要與圖片的相關(guān)的，大多都會(huì)用的上。

(1)、背景圖片的導(dǎo)入：
當(dāng)然大家最熟悉的當(dāng)然是background與background-image了。
為網(wǎng)頁(yè)設(shè)計(jì)背景圖片的代碼是：
body {background:url("d:\images\04.jpg")}
或者
body {background-image:url("d:\images\04.jpg")}
這樣的話，我們就能將想要作背景的圖片導(dǎo)進(jìn)網(wǎng)頁(yè)里了。

(2)、背景圖片的顯示方式：
當(dāng)然，只用上面的代碼，是無(wú)法表達(dá)出自己想要的效果的。因?yàn)?，圖片小了，就會(huì)以平鋪的方式，如果是大了，為顯示它，就是會(huì)出現(xiàn)滾動(dòng)條，這樣多不好。因此，我們還得多其進(jìn)行顯示控制，也就是要用到background-repeat，
它是取值：
repeat : 默認(rèn)值。背景圖像在縱向和橫向上平鋪
no-repeat : 背景圖像不平鋪
repeat-x : 背景圖像僅在橫向上平鋪
repeat-y : 背景圖像僅在縱向上平鋪
而代碼，我想只要懂一點(diǎn)CSS的都知道，如下：
body {background:url("d:\images\04.jpg");background-repeat:no-repeat}
這樣的話，它就是以原圖像大小顯示了。

(3)、背景圖片的大小控制：
不過(guò)問(wèn)題是，倘若圖片過(guò)大了，又怎么辦呢？對(duì)于一個(gè)好網(wǎng)頁(yè)來(lái)說(shuō)，最好不要用太大的圖片，原因上面也說(shuō)過(guò)了，影響打開(kāi)網(wǎng)頁(yè)的速度。我們最好還是用PS或者FireWorks處理一下。不過(guò)既然我提到了，我們也不防用CSS來(lái)實(shí)現(xiàn)圖片大小的控制。
我想很多人會(huì)自然而然的用上如下代碼：
<style type="text/css">
body{background-image:url("d:\images\04.jpg");width:350px;height:350px;}
</style>
呵呵，想法是好的，但你所用的瀏覽器支持嗎？我想IE或者FF一定會(huì)當(dāng)作沒(méi)看見(jiàn)吧。也許你會(huì)問(wèn)，我曾經(jīng)設(shè)計(jì)論壇風(fēng)格時(shí)，是可以實(shí)現(xiàn)的??？我想，如果只是上面的代碼的話，那是不可控制圖片的，因?yàn)樗皇强刂艬ODY的大小。當(dāng)然，這里也是控制不了的。如果是其它的ID標(biāo)記，我想是可以控制記標(biāo)記的范圍大小，呵呵，當(dāng)然也就不是圖像的大小了。
說(shuō)實(shí)話，這個(gè)問(wèn)題不僅困擾著你們，同時(shí)也困擾著我。因?yàn)樗皇且粋€(gè)屬性的值，而不是一個(gè)真正的對(duì)像。呵想到了用CSS控制的話，記得告訴我哦。

補(bǔ)充：W3C于9月10發(fā)布了一篇名為《CSS Backgrounds and Borders Module Level 3》的應(yīng)文章，里面為CSS的背景加上了幾個(gè)我們從未見(jiàn)的屬性：
background-clip ：
background-origin ：
background-size ：背景尺寸。
background-break ：
雖然是有了這些屬性，不過(guò)現(xiàn)在還沒(méi)有支持它們的瀏覽器。真是好苦惱啊。

(4)、背景圖片的位置控制：
背景圖片，我科是導(dǎo)進(jìn)來(lái)了，但是它的位置真有一點(diǎn)無(wú)法讓人接受。因?yàn)樗J(rèn)的是左上對(duì)齊。但是我們卻不想這樣子放置，那我們又該怎么辦呢。不要著急，激動(dòng)人心的時(shí)刻馬上到來(lái)，現(xiàn)在，讓我們來(lái)認(rèn)識(shí)一下background-position、background-position-x及background-position-y吧。
a.基本語(yǔ)法:
background-position : length || length
background-position : position || position
background-position-x : length | left | center | right
background-position-y : length | top | center | bottom

b.語(yǔ)法取值:
length :百分?jǐn)?shù) | 由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值。
position : top | center | bottom | left | center | right

c.示例：
body { background-image: url("d:\images\04.jpg"); background-position: 50% 50%; background-repeat:no-repeat; } /*設(shè)置雙向坐標(biāo)，這時(shí)相當(dāng)于完全居中*/
body { background-image: url("d:\images\04.jpg"); background-position-x: 50%; background-repeat:no-repeat; } /*設(shè)置雙向坐標(biāo)，這時(shí)相當(dāng)于水平居中*/
body { background-image: url("d:\images\04.jpg"); background-position-y: 50%; background-repeat:no-repeat; } /*設(shè)置縱向坐標(biāo)，這時(shí)相當(dāng)于垂直居中*/
對(duì)于取值為length | top | center | bottom我只寫(xiě)下面三個(gè)例子。
body { background-image: url("d:\images\04.jpg"); background-position: top right; background-repeat:no-repeat; } /*設(shè)置雙向坐標(biāo)，這時(shí)相當(dāng)于右上*/
body { background-image: url("d:\images\04.jpg"); background-position: 50% center; background-repeat:no-repeat; } /*設(shè)置雙向坐標(biāo)，這時(shí)相當(dāng)于中下*/
body { background-image: url("d:\images\04.jpg"); background-position: 60px center; background-repeat:no-repeat; } /*設(shè)置雙向坐標(biāo)，這時(shí)相當(dāng)于距左60像素下*/
說(shuō)了這么多例子，我想你對(duì)于定位，有一定的了解了吧。

(5)、背景圖片的透明設(shè)置：
有的時(shí)候，我們總想著去將圖片設(shè)置成透明的。

(6)、多幅背景圖片的設(shè)置：
對(duì)于多幅背景圖片的設(shè)置，我是在《超越CSS：WEB設(shè)計(jì)藝術(shù)精髓》里看到的。不過(guò)，卻又讓我很遺憾，因?yàn)?，目前支持一個(gè)標(biāo)簽內(nèi)有多幅背景圖片的瀏覽器太小了，我知道的也只有Apple Safari 。以許你會(huì)問(wèn)，這怎么可能。當(dāng)你看完這個(gè)實(shí)例之后，我想你會(huì)驚訝，“天啊，CSS3之前都只能給每個(gè)元素使用一幅圖片?！比绻胙芯恳幌碌脑?，就快快安裝一個(gè)SAFARI瀏覽器吧。對(duì)我而言，我相信，這是發(fā)展的趨勢(shì)?？傊痪湓?，誰(shuí)解釋CSS能力越強(qiáng)，它就將是發(fā)展的潮流，誰(shuí)俱有完美的WEB準(zhǔn)標(biāo)，誰(shuí)就是明日瀏覽器之星。
代碼如下：
body {
background-image:
url("d:\mypic\001.png"),
url("d:\mypic\002.png");
url("d:\mypic\003.png");
url("d:\mypic\004.png");
background-repeat:
no-repeat,
no-repeat,
no-repeat,
no-repeat,
repeat-x,
repeat-y,
repeat-x,
repeat-y,
background-position:
top left,
top right,
bottom right,
bottom left,
top left,
top right,
bottom right,
bottom left;}