body {background:#426DAD url(http://t1.qpic.cn/mblogpic/d86bdc30ae8fc8a43e5e/2000) repeat fixed top center;}
網頁背景圖固定不動，不跟随滾動條滾動
我們在做網頁的時候，當背景是一張完整的圖檔，不動讓其跟随滾動條滾動，怎麼辦？下面詳細講解一下。
CSS代碼示例-背景顔色屬性(background-color)
<html> <head> <title>背景顔色 background-color</title> <style type="text/css"> body {background-color:#99FF00;} </style> </head>
<body> <p>這個HTML使用了CSS的background-color屬性，将HTML的背景顔色變成翠綠色。<p> </body> </html>
示範結果： 這個HTML使用了CSS的background-color屬性，将HTML的背景顔色變成翠綠色。
CSS代碼示例-背景圖檔屬性(background-image)
<html> <head><title>背景圖檔background-image</title></head>
<body style="background-image:url(../images/css_tutorials/background.jpg)"> <p>這個HTML使用了CSS的background-image屬性，設定了背景圖檔。<p> </body> </html>
示範結果： 這個HTML使用了CSS的background-image屬性，設定了背景圖檔。
CSS代碼示例- 背景重複屬性(background-repeat)
<html> <head> <title>背景重複 background-repeat</title> <style type="text/css"> body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:repeat-y} </style> </head>
<body> <p>這個HTML使用了CSS的background-repeat屬性，使背景圖檔豎向重複。<p> <p>常用的background-repeat的屬性值有: repeat-x(橫向重複)，repeat-x(橫向重複), no-repeat(不重複)。</p> <p>background-repeat屬性要和background-image一起用。</p> </body> </html>
示範結果：
CSS代碼示例-背景附着屬性(background-attachment)
<html> <head> <title>背景附着屬性 background-attachment</title> <style type="text/css"> body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:no-repeat; background-attachment:fixed} </style> </head>
<body> <p>這個HTML使用了CSS的background-attachment屬性，将背景圖檔固定，不随内容滾動而滾動。<p> <p>背景附着(background-attachment)屬性有兩個值。一個是scroll，表示随内容滾動而動；一個是fixed，表示固定不動，不受内容滾動影響。預設值是scroll。</p> <p>background-attachment要和background-image一起用。</p>
</body> </html>
示範結果：
背景附着(background-attachment)屬性有兩個值。一個是scroll，表示随内容滾動而動；一個是fixed，表示固定不動，不受内容滾動影響。預設值是scroll。
background-attachment要和background-image一起用。
這個HTML使用了CSS的background-attachment屬性，将背景圖檔固定，不随内容滾動而滾動。
背景附着(background-attachment)屬性有兩個值。一個是scroll，表示随内容滾動而動；一個是fixed，表示固定不動，不受内容滾動影響。預設值是scroll。
CSS代碼示例-背景位置屬性(background-position)
<html> <head> <title>背景位置屬性 background-position</title> <style type="text/css"> body {background-image:url(../images/css_tutorials/background.jpg);background-repeat:no-repeat; background-position:20px 60px} </style> </head> <body> <p>這個HTML使用了CSS的background-position屬性。這個屬性和background-image屬性連在一起使用，決定了背景圖檔的最初位置。</p> <p>上面的代碼表示背景圖檔的初始位置距離網頁最左面20px，距離網頁最上面60px。</p> </body> </html>
示範結果：
上面的代碼表示背景圖檔的初始位置距離網頁最左面20px，距離網頁最上面60px。
CSS代碼示例-背景屬性(background)
<html> <head> <title>背景屬性 background</title> <style type="text/css"> body {background:#99FF00 url(../images/css_tutorials/background.jpg) no-repeat fixed 40px 100px} </style> </head>
<body> <p>這個屬性是設定背景相關屬性的一種快捷的綜合寫法， 包括background-color, background-image, background-repeat, backgroundattachment, background-position。</p> <p>這個HTML所用的背景屬性表示，網頁的背景顔色是翠綠色，背景圖檔是background.jpg圖檔，背景圖檔不重複顯示，背景圖檔不随内容滾動而動，背景圖檔距離網頁最左面40px，距離網頁最上面100px。</p>
</body> </html>
![龍珠訓練營task04[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)