2009年6月25日星期四

添加blogger背景图教学

简单添加blogger背景图
按照慣例先進控制主頁 >
布局 > 修改HTML
因為簡單,同樣不須勾選"展開小裝置範本"!

1. 先找到長得像如下的語法(主要是找到 body { 這東東)


body {
background:#ffffff;

2. 我們只要將其中的background:#ffffff;整句換成如下各種語法

讓圖無限拼貼語法:
background:url(http://你的背景圖連結位置) repeat;
你就會擁有一張會自動複製到滿滿的背景圖囉~

讓圖僅縱向拼貼語法:
background:url(http://你的背景圖連結位置) repeat-y top left;
你就會擁有一張會自動縱向複製,頂上靠左的背景圖囉~

讓圖僅橫向拼貼語法:
background:url(http://你的背景圖連結位置) repeat-x top left;
你就會擁有一張會自動橫向複製,頂上靠左的背景圖囉~

一張大底圖居中語法:
background:url(http://你的背景圖連結位置) no-repeat top center;
你就會擁有單張,頂上居中的大圖囉~

如果你想將圖給固定住,不隨著上下拖拉移動,則簡單再下一行自行加上固定命令語法即可,語法如下:

background-attachment:fixed;
這句語法就是命令你的背景圖固定不動的語句!

另外如果你提供的圖是去背的GIF圖,那麼則可以一樣在上面各語句裡的url前添加顏色代碼,就會按照你給的顏色呈現囉!
添加方式如下:

background:#xxxxxx url(http://你的背景小圖連結位置);
沒錯,就是這麼簡單,只要加上#xxxxxx即可,其中的xxxxxx請自行填上顏色代碼呦!

往後你就可以簡單更改你的背景風格囉!!

語法中針對圖放置的對齊位置可以有以下組合運用:
top left 頂上靠左
top right 頂上靠右
top center 頂上居中
bottom left 頂下靠左
bottom right 頂下靠右
bottom center 頂下居中

1 条评论: