主旨：暫時解決網誌無法自訂背景的困擾..

1. 到目前為止僅適用Microsoft Internet Explorer 上而已。
2. 因為MSN Spaces擋掉了background-image: url() 的通用背景樣式設定...
3. 是無意間測試發現的.....^^"
4. 最下面有 Step by Step 教學 。 (4/19修改)
5. 使用半透明背景主題的人士，加上濾鏡會與MSN Spaces的濾鏡發生衝突，效果大減。

要如何模擬成有背景圖片呢？

HTML語法：(紅色為關鍵部份，不可去掉) 

本文寬與本文高設定成 100% 就能延展擴大至整個網誌內容....像本篇背景

＊1.只要設定背景圖片位址和寬高(純網誌背景圖而已)(background-color: TRANSPARENT;已省略)

<div style="WIDTH: 100%;">
<img height="圖高" src="背景圖片" width="圖寬" align="right">
<div style="float:left;WIDTH: 100%; ">
內容
</div>
</div>
　

＊.最簡單背景之設法(純網誌背景圖而已)(連圖寬都不用設) <- 4/17

<img src="背景圖片" align="right">
<div style="float:left;WIDTH: 100%;">
內容
</div>
　

＊2.可自行設定本文寬、本文高(需使用絕對大小如px)，也可自行加線框，配合★圖層框框製作附加捲軸變化 教學，會有豐富效果。

HTML部分(background-color: TRANSPARENT;已省略)

<div style="WIDTH: 本文寬; HEIGHT: 本文高;">
<img height="圖高" src="圖片位址" width="圖寬" align="right">
<div style=" WIDTH: 本文寬; HEIGHT: 本文高;">
內容
</div>
</div>
　

範例：

HTML：

<div style="WIDTH: 109px; HEIGHT: 108px;">
<img height="108px" src="http://storage.msn.com/x1pw_6EGuGCxXCMx46GPzrYuVVA27PnQROvKQbnBS92FTAzXu41h1iYKIUxwFaK4un2jHce9TcoXNqj4_u1Z5mApG-Nq-P-zTUe" width="109" align="right">
<div style="float:left; background-color: TRANSPARENT;WIDTH: 109px; HEIGHT: 108px; ">
<br>
<font color="#FF00FF">內容
<br>
<br>
圖片在文字下方</font>
</div>
</div>

結果：
　

內容

圖片在文字下方

$進階用法：

◊在前景部份(上方部份)可以換成圖片濾鏡

範例 1(文字變透明)：

HTML：

把【background-color:TRANSPARENT;】
換成其中一種濾鏡【filter:alpha(opacity=35,finishOpacity=35,style=0);】

<DIV style="WIDTH: 109px; HEIGHT: 108px"><IMG height=108 src="http://storage.msn.com/x1pw_6EGuGCxXCMx46GPzrYuVVA27PnQROvKQbnBS92FTAzXu41h1iYKIUxwFaK4un2jHce9TcoXNqj4_u1Z5mApG-Nq-P-zTUe" width=109 align=right>
<DIV style="FLOAT: left; WIDTH: 109px; HEIGHT: 108px; filter:alpha(opacity=50, finishOpacity=50,style=0)"><BR>
<b><FONT color=#ff00ff>內容 <BR><BR>圖片在文字下方</FONT></b></DIV></DIV>

　

結果：【文字也變透明了】
　

內容

圖片在文字下方

範例 2(圖片也重疊了)：

HTML：【再把內容換成圖片】

<DIV style="WIDTH: 109px; HEIGHT: 108px"><IMG height=108 src="http://storage.msn.com/x1pw_6EGuGCxXCMx46GPzrYuVVA27PnQROvKQbnBS92FTAzXu41h1iYKIUxwFaK4un2jHce9TcoXNqj4_u1Z5mApG-Nq-P-zTUe" width=109 align=right>
<DIV style="FLOAT: left; WIDTH: 109px; HEIGHT: 108px; filter:alpha(opacity=50, finishOpacity=50,style=0)">
<IMG height=108 src="http://storage.msn.com/x1plMlLh5OuvLUJCkwU76rRa6brGDcBU02OcTTQi4o59hUqkhhrPM7IRjO0QKmfhyvBdGeOTA3KwnrqmMuW1B3tMkW6TSUM-MlhBX7DCiDOt3aQnWkFSBDpug" width=109></DIV></DIV>
　

結果：【圖片也變透明了】

◊在背景部份(下方部份)也可以多加圖片濾鏡

範例：

HTML：背景圖多加圓形濾鏡

<div style="WIDTH: 109px; HEIGHT: 108px;">
<img height="108px" src="http://storage.msn.com/x1pw_6EGuGCxXCMx46GPzrYuVVA27PnQROvKQbnBS92FTAzXu41h1iYKIUxwFaK4un2jHce9TcoXNqj4_u1Z5mApG-Nq-P-zTUe" style="FILTER: alpha(opacity=100, finishOpacity=0,style=2)" width="109" align="right">
<div style="float:left; background-color: TRANSPARENT;WIDTH: 109px; HEIGHT: 108px; ">
<br>
<font color="#FF00FF">內容
<br>
<br>
圖片在文字下方</font>
</div>
</div>

結果：

內容

圖片在文字下方

＊因為只有一種方法可以實現背景圖，那就是把本文浮動置左，圖案浮動置右。所以也造成圖片永遠在右邊的問題。

這裡提供一個解決辦法，可以讓圖片 【永遠置左】

提供一個透明圖片位址: http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_7_0?1113334951.gif

這裡提供一個解決辦法，可以讓圖片"強制" 【永遠置中】

嘿嘿....那就是多包一層<DIV align=center>拉...相對的要填好本文寬度

HTML語法 :

Step by Step 教學：

1. 請先輸入好你的網誌內容。
     
   　
2. 打開記事本複製以下內容 
   
   置左及置右人士：
   <div style="WIDTH: 100%; ">
   <img src="透明圖片" width=100% align="right"><img height="圖高" src="背景圖片" width="圖寬" align="right">
   <div style="float:left; WIDTH: 100%; ">
   內容
   </div>
   </div>
   　

   置中人士：

    
   
   <div align=center>
   <div style="WIDTH: 本文寬; ">
   <img src="背景圖片" width="100%" align="right">
   <div style="float:left; WIDTH: 100%; ">
   內容
   </div></div></div>
   　
   　
3. 置左及置右人士要看此步驟：
   
   輸入透明圖片位置(為了置左用)....
   如果覺得沒差請把<img src="透明圖片" width=100% align="right">刪除就能還原成置右，然後請跳到下一步
   (提供一個透明圖片位址: http://kr.img.blog.yahoo.com/ybi/1/63/8e/gene7299/folder/3/img_3_7_0?1113334951.gif)
    
   
   
    
4. 置左及置右人士：捲軸拉到最右邊...輸入你要放的 "背景圖片網址" 和  圖寬 、圖高。
   
   
   
   
   圖寬、圖高 隨你高興設多大就多大
   不過也可參考這個(附近即可)
   (網誌最大寬度圖)
   
   
   置中人士：
   
   1.依照你的網誌大小,填入不要比上圖(網誌最大寬度圖)還大的本文寬值
   2.輸入你要放的 "背景圖片網址"
   
   
   
   　
5. 像本篇輸入好之後如下圖，之後看你要不要替背景加上圓形濾鏡，如果不要請跳到第 7 步。
    
   
    
   像本篇範例要放此圖
   
    
    
   　
6. 請在  align="right" 的後方 輸入理想的濾鏡 ，如　style="FILTER: alpha(opacity=100, finishOpacity=0,style=2)"
   更多濾鏡參考（圖片濾鏡）
    
   
   
    
   　
7. 把該填的填完之後，請從第 1 行複製到 "內容" 那一行
   
    
   
   
   　
8. 回到你的網誌編輯處，打開"網誌內容擴充編輯器" ，
   並把　使用 HTML 格式建立網頁。 打勾，見到下一步驟
   
   (沒有「使用HTML格式建立網頁」這個欄位 ..要看MSN Spaces 編輯網誌內容擴充工具或直接使用 原網誌編輯工具網址才有)
   
   
   　
   　
9. 把　使用 HTML 格式建立網頁。 打勾之後，
   請在所有內容的最上面貼上剛剛在第7步驟裡　[記事本]　複製的內容。
   
   
   
   
   　
10. 貼完之後如下圖，再把多餘的　內容　兩字刪除
    
    
    
    　
    　
11. 置左及置右人士：刪掉之後，請把捲軸拉至最底，請在所有內容的最後方輸入　</div></div>
    
    置中人士：刪掉之後，請把捲軸拉至最底，請在所有內容的最後方輸入　</div></div></div>
    
    
    　
12. 把　使用 HTML 格式建立網頁。 打勾取消之後，就能看到成功的變化囉。
    
    (最後請注意 ，已設好背景圖片的網誌內容，直接在網頁上編輯可能會影響到圖片寬度，如果真的影響到，在勾上　使用 HTML 格式建立網頁。在網誌內容最前端找到width=修改回來)　
    
    
    
    
    　
13. 謝謝你的觀賞.
    
    　
14. 有任何問題一定要先到    看看喔

    
    
    Edit　

15. 下面是本篇Step by Step教學範例完成的結果