CSS 中有5個主要的背景（background）屬性，它們是：
background-color： 指定填滿背景的顏色。
background-image： 引用圖片作為背景。
background-position： 指定元素背景圖片的位置。
background-repeat： 決定是否重複背景圖片。
background-attachment： 決定背景圖是否隨頁面捲動。
這些屬性可以全部合併為一個縮寫屬性： background。需要注意的一個要點是背景佔據元素的所有內容區域，包括 padding 和 border，但不包括元素的 margin。它在 Firefox， Safari ，Opera 以及 IE8 中工作正常，但是 IE6 和 IE7 中，background 沒把 border 計算在內。
背景色（background-color）
#background-color 屬性用純色來填滿背景。有許多方式指定這個顏色，以下方式都得到相同的結果。
background-color: blue;
background-color: rgb（0， 0， 255）;
background-color： #0000ff;
# background-color 也可被設定為透明（transparent），這會使得其下的元素可見。
背景圖（background-image）
#background-image 屬性允許指定一個圖片展示在背景中。可以和 background-color 連用，因此如果圖片不重複地話，圖片覆蓋不到地地方都會被背景色填滿。程式碼很簡單，只需要記住，路徑是相對於樣式表的，因此以下的程式碼中，圖片和樣式表是 在同一個目錄中的。
background-image: url（image.jpg）;
但是如果圖片在一個名為images 的子目錄中，就應該是：
background-image： url（images/image.jpg）;
<html>
<head>
<style type="text/css">
body {background-image: url(这个地方要写的就是你的图片的url地址了);}
</style>
</head>
<body>
</body>
</html>背景平鋪（background-repeat）
設定背景圖片時，預設把圖片在水平和垂直方向平鋪以鋪滿整個元素。這也許是你需要的，但是有時會希望圖片只出現一次，或只在一個方向上平鋪。以下為可能的設定值和結果：
background-repeat： repeat; /* 預設值，在水平和垂直方向平鋪*/
background-repeat： no-repeat; / * 不平鋪。圖片只展示一次。 */
background-repeat： repeat-x; /* 水平方向平鋪（沿x 軸） */
background-repeat： repeat-y; /* 垂直方向平鋪（沿y 軸） */
background-repeat： inherit; /* 繼承父元素的background-repeat 屬性*/
<html>
<head>
<style type="text/css">
body
{
background-image:url(图片123.jpg);
background-repeat:no-repeat;
}
</style>
</head>
<body>
</body>
</html>##背景的簡寫屬性
可以把背景的各個屬性合為一行，而不用每次都單獨把他們寫出來。格式如下：
background： 《color》 《image》 《position》 《attachment》 《repeat》
例如，下面的聲明
background-color： transparent;
background-image： url（image.jpg）;
background-position： 50% 0 ;
background-attachment： scroll;
#background-repeat： repeat-y;
可以合為單獨一行：
background： transparent url（image.jpg） 50% 0 scroll repeat-y;
而且不需要指定每一個值。如果省略值地話，就使用屬性地預設值。例如，上面那行和下面這個效果一樣：
background： url（image.jpg） 50% 0 repeat-y;
<html>
<head>
<style type="text/css">
body
{
background:#ff0000 url(图片888.jpg) no-repeat fixed center;
}
</syle>
</head>
<body>
<p>各个属性间并无顺序</p>
<p>各个属性间并无顺序</p>
<p>各个属性间并无顺序</p>
<p>各个属性间并无顺序</p>
</body>
</html>
下一節