小薇格格的部落格

很多人想要將自己部落格面板背景改成自己喜歡的圖片當背景

做個屬於自己風格的部落格面板

套用ㄌ別人的式樣但背景不是自己喜歡的但不知如何改?

現在來示範改部落格背景步驟:

首先要先將圖片(可以是靜態圖JPG圖檔也可以使用GIF圖檔喔!)

上傳到網路空取得圖片網址或是上傳到部落格相簿

取得圖片網址~~在把圖片網址套入CSS式樣表中部落格背景圖網址處

上傳圖片到其他空間取得網址請參考教學→

(一)上傳無名部落格相簿取得網址步驟如下:

1. 登入部落格按進入相簿

2.選擇一本相簿~~按進去後按上方上傳影音或照片按鈕

3. 按選擇多個檔案~~點要上傳的圖片~開啟

再按開始上傳

4. 等候上傳~~讓灰色推桿跑完(到最右邊)

5. 上傳完成會出現上傳成功後視窗~~按回我的相簿

6. 在點開剛剛上傳的圖片~~在圖片上按右鍵選內容

7. 在內容框中複製下圖片網址(內容框中也有顯示圖片寬高度)

下圖中示範是使用較窄的圖片因考量到面板格局設計

使用背景圖固定在左邊語法設定

(二) 開始改部落格背景

1. 回到部落格首頁~~按式樣管理

2.選修改CSS式樣表

3.打開的式樣表中找到語法中 body{.........} 這段中背景圖網址處
如下圖反白位置就是部落格背景圖網址處~可以換上你的圖片網址

再預覽看看滿意後按存檔~~回前頁

這裡示範的背景圖因配合面板設計使用這張360X540大小的圖

所以使用語法如下(語法示範為背景圖固定置左設定)

BODY {
BACKGROUND:url(背景圖網址處) #000000 fixed no-repeat left top;

MARGIN:0px;COLOR:#fff;FONT-FAMILY:verdana;FONT-SIZE:7pt;}

語法中屬性質註解:

#000000  →這是背景色色碼

  fixed      →背景固定

no-repeat →背景不重覆

left top;    →背景設在靠左邊即緊靠上方邊緣

MARGIN:0px; →距離邊緣空白 設成 0

COLOR:#fff;   →部落格中文字顏色~這裡是設成白色

FONT-FAMILY:verdana; →部落格中文字設定字型

FONT-SIZE:7pt; → 部落格中文字大小

背景圖CSS設定屬性值及顯示位置圖解詳解教學請參考 →

(建議如是套用別人設計的版型式樣而自己又不會改設定

怕滿面格式因圖片大小不跟原設計的尺寸相符~以致面板格式破壞

可以打開CSS式樣表中查到原背景網址先複製下來貼到網址列

BODY {
BACKGROUND:url(原背景圖網址處) #000000 fixed no-repeat left top;MARGIN:0px;COLOR:#fff;FONT-FAMILY:verdana;FONT-SIZE:7pt;}

按Enter打開後在圖片上按右鑑查看大小如下

~~再找一張同樣大小圖片上傳取得網址後

直接換上背景圖網址處即可就不會因圖片大小不同使面板格式不對稱~

且最好使用與原圖片類似顏色色系的圖片才不需要改其他字體顏色等設定喔!)


[本篇文章引用網址]http://www.wretch.cc/blog/trackback.php?blog_id=fanlucy01&article_id=9424511