非學不可

【部落格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樣式的規則是適用各個部落格喔!雖然是用痞客做為示範，但無名、天空等各家部落格都是一樣的^^