【部落格css樣式】 背景系列-1   哪裡改背景圖? 如何素材小圖做成連續背景?!

((背景系列文章))

【部落格痞客css樣式】 背景系列-1 哪裡改背景圖? 素材小圖做成連續背景?!

部落格痞客css樣式】 背景系列-2 如何固定背景圖不隨捲軸移動

【部落格痞客css樣式】 背景系列-3 如何設定背景圖位置和背景色結合應用

 

 

【新手Q.1】CSS哪裡改背景圖

進入痞客後台選樣式設計精靈→css原始碼編輯

 

尋找.jpg  


看到一堆css整個超眼花繚亂,要怎麼找到你要修改的地方,

點瀏纜器的編輯尋找”就會直接跳到你找的區塊唷!


body.jpg  

 

--------------------------------------------------------------------------------------------

 


背景圖.jpg  

劃紅線那行”background”就是要改背景屬性的地方,

寫法:

Background:url(背景圖網址);

 

重點:

Backgroundurl間一定要有”: ”冒號

每一行最後一定要”;”分號

url(   )←括號裡的圖片網址路徑要正確,如http://www.oz.stu.edu.tw/s96108201/www/back.jpg

一定要將圖檔上傳到網路空間,注意網址是否jpg .gif .png等圖片檔名結尾,


--------------------------------------------------------------------------------------------

【示範】素材小圖做成連續背景

 

ORIGIN.jpg  

1.jpg  

原本background那行後面是寫#505050

這是色碼#505050就是目前灰色純顏色的底 

現在要改成以圖片來當底圖

改成下面這樣,括號內就是圖片網址

Background:url(http://atp.boo.jp/bg/img/dot_39.gif);

 dot_39.gif  

因為我們拿來當背景的圖片是一張32x32px的咖啡色白點點的小圖

要讓他直行和橫列都重複排列才能變成一張完美的底圖

所以要加上repeat ,打在右括號空一格後面,

Background:url(http://atp.boo.jp/bg/img/dot_39.gif) repeat;

NEW.jpg  

儲存後就會變成一片完整咖啡色白點的背景圖囉^.^

 

--------------------------------------------------------------------------------------------

補充:

背景圖重複控制:

background-repeat: no-repeat;   不重複

background-repeat: repeat-x;    x軸重複(橫向)

background-repeat: repeat-y;    y軸重複(直向)

background-repeat: repeat;       xy都重複(直和橫都重複)

 

----------------------------------------------------------------------------------------------

 

如果有疑問請回留言唷

 

ps:css樣式的規則是適用各個部落格喔!雖然是用痞客做為示範,但無名、天空等各家部落格都是一樣的^^

arrow
arrow
    全站熱搜

    鹿老師 發表在 痞客邦 留言(14) 人氣()