close

進入管理後台→面板管理→自定樣式(css)

 

 找到 /*主體*/語法標籤,下面有↓

body{  
    margin:0px 0px 0px 0px;

    text-align: center;
 /*background-image:url(底圖網址);*/

  background-image:url(底圖網址);
 background-attachment:fixed;
 background-repeat:no-repeat;
 background-position: center top;

 
}

將原本的background-image:url...Mark掉!然後新加入紅色語法

 background-image:url(底圖網址);  背景圖網址
 background-attachment:fixed;         ←背景圖不捲動  (scroll捲動)
 background-repeat:no-repeat;          不重複排列
 background-position: center top;    位置 (請參考以下說明)

要如何才能讓背景圖片不管捲軸拉到那邊都不會變?這其實只要透過設定background-attachment就能達到該效果了。

 

只要把background-attachment設成fixed就能固定背景圖片了。若是要取消固定的話,只要把background-attachment拿掉或是設成none就行了。而其中的background-repeat設成no-repeat是避免當背景圖片太小張時,讓它不要重覆的顯示。

還有另一種常見的情況是,背景圖片本身就只是小小張的,但想讓它固定在網頁的某一位置的話,我們除了用background-attachment之外,還要搭配background-position來一起使用。

background-position值的設定可用數字加單位、數字加百分比或是使用關鍵字。background-position基本上需要兩各值,第一個是距離左邊界的值,另一個則是距離上邊界的值。但是若是要在中間的話,可以設一個center就可以了,另一個若沒有的話,會自動認為也是center。

background-position位置的相對關係可以參考下面的圖解。

background-position:    位置,參數有↓ 
                        top left;     (左上)
                        top center;   (中上)
                        top right;    (右上)
                        center left;  (中左)
                        center center;(中中)
                        center right; (中右)
                        bottom left;  (左下)
                        bottom center;(中下)
                        bottom right; (右下)

 

引用至:http://blog.xuite.net/han31079/b747/13894292-%E5%9B%BA%E5%AE%9A%E8%83%8C%E6%99%AF%E5%9C%96%E7%89%87%E5%8F%8A%E4%BD%8D%E7%BD%AE

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 Yusayi 的頭像
    Yusayi

    陸景和 小fans~

    Yusayi 發表在 痞客邦 留言(0) 人氣()