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

((背景系列文章))

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

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

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

 

 

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

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

 

 


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

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


 

 

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

 


 

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

寫法：

Background:url(背景圖網址);

 

重點：

Background和url間一定要有”: ”冒號

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

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

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


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

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

 

 

 

原本background那行後面是寫#505050

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

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

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

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

   

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

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

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

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

 

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

 

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

補充:

背景圖重複控制:

background-repeat: no-repeat;   不重複

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

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

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

 

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

 

如果有疑問請回留言唷

 

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

文章標籤
全站熱搜
創作者介紹
創作者 鹿老師 的頭像
鹿老師

非學不可

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