該如何使用一張圖片延展整個背景? - 部落格

※ 引述《ollo (ollo)》之銘言：
: 如果我沒誤會你的意思的話
: 我猜你是不知道 picasa 的一個特性
: 就是同一張照片有可以有很多種尺寸
: (抱歉 因為要說明網址 所以沒有縮)
: 譬如你本來可能看到這樣:
: http://lh6.ggpht.com/_YNX2OJIu1kU/S-6NKyJwU6I/AAAAAAAABFA/-czDJZjG-RY/s800/DSC00163.jpg
: 那 /s800/ 就是關鍵字
: 想大一點 就改成 /s1024/ /s1280/ /s1440/ /s1600/
: 如果要原圖大小 就這樣:
: http://lh6.ggpht.com/_YNX2OJIu1kU/S-6NKyJwU6I/AAAAAAAABFA/-czDJZjG-RY/s0/DSC00163.jpg
: 當然可以小一點 就讓你自己 try try 看有哪些 size
: 而且還可以變成正方形的縮圖哩:
: http://lh6.ggpht.com/_YNX2OJIu1kU/S-6NKyJwU6I/AAAAAAAABFA/-czDJZjG-RY/s144-c/DSC00163.jpg

若是無法讓圖片以延展方式表現
讓畫面右測的滾軸上下移動時，圖片可以成為真正的"背景"而不隨滾軸上下而移動
也算是達到相同的效果。

ollo版友提供以下的方法:

關於捲動，可以參考
'background-attachment'
'background-position'

http://www.w3.org/TR/CSS2/colors.html


============================================
background-position:50% 0%

前面50%的數值代表圖片左右的移動，隨數字增加偏左，50%為中間值。
後面的0%為圖片上下的移動，隨數字增加而偏上，50%為中間值
隨個人喜好作調整。

background-attachment:fixed;
這一行指令是讓圖片成為不隨滾軸上下而移動的背景，也就是使圖片靜止。



以下為範例

body {
background:$bgcolor url(圖片網址) no-repeat;
background-position:50% 0%;
background-attachment:fixed;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}


--