延續上一次的教學，這一篇要教大家的是在blogger的模板中加入背景圖案．
↑嚴肅．．．咳，有點不習慣．．．
背景圖片分成兩種，一種是由一張小圖片不斷的重複來填滿整個背景；或用一大張圖片直接填滿．
這裡我用來做示範的是blogger模板的基本款－Minima，有些code可能會跟你想改的模板有出入，不過差別不會太大的啦，自己看著辦 ←其實是很懶惰解釋太多 |||
先給大家看一看還沒經過任何修改的樣子．
重複圖片背景的做法
♥ 當然是先找適合的圖片 |||
♥ 把想要用的圖片上傳（upload）到網上．可以考慮使用photobucket之類的東西，不過建議選擇穩定一點的，不然會導致很多不堪設想的事件（比如照片全部變成叉燒包之類的 囧）
♥ 拿到圖片網址過後，在編輯模板的html中找下列的程式碼．
body {然後在background:$bgcolor 之後，加入URL(圖片網址) repeat，變成
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
body {
background:$bgcolor URL(圖片網址)repeat;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
成果(借用妹妹的背景圖案來做例子=____=)
不重複圖片背景的做法
跟重複圖片的做法一樣，只不過，要在URL(圖片網址)後面的部分改成no-repeat
完成後，如下
body {
background:$bgcolor URL(圖片網址) no-repeat;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
不過，no-repeat並不會讓你的背景圖片出現在整個部落格的正中央的位置，而是會像在下面的screenshot一樣，粘在左上角．
設定背景圖片的位置
如果你希望圖片可以保持在正中央的位置，就要在body{ }裡面加上background-position:x y;
x=由左到右的距離，y=由上到下的距離，而50則是設定成中間的%率
所以讓背景圖片保持在正中央的代碼為 background-position:50% 0%;
＊畢竟我不知道你的模板／圖片是怎樣的，如果還是有差距的話，請自行修改％直到成功為止．
＊記得x跟y之間要空一格
修改後的程式碼應該是像下面這樣子的
body {
background:$bgcolor url(圖片網址) no-repeat;
background-position:50% 0%;
background-attachment:fixed;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
成果(Hello Hello Kitty~~|||)
控制背景图片是否會滚动
很多時候，背景圖片的長度很少可以跟你整個部落格的長度媲美，所以，為了讓整體更美觀，你可以鎖定背景圖片，讓它不會在你滾動頁面的時候也滾掉了．
所需要做的就是在body{}之中加入 background-attachment:fixed;
修改後的程式碼如下
body {
background:$bgcolor url(圖片網址) no-repeat;
background-position:50% 0%;
background-attachment:fixed;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
完成後，你的背景圖片就會乖乖的待在原地，不跟著你一起亂動了．
～～～小教學～～～
* no-repeat = 完全不會重複
* repeat = 橫向+直向重複
* repeat-x = 橫向重複
* repeat-y = 直向重複
橫向(x)的指令←應該是這樣稱呼 =___=
* left = 圖片從最左邊開始
* center = 圖片從中間開始
* right = 圖片從右邊開始
直向(y)的指令
* top = 圖片從最高處開始
* center = 圖片從中間開始
* bottom = 圖片從最低開始
我不知道你们看的时候会不会很乱，如果有不明白的地方尽管问吧～
希望這一篇可以幫到想替自己的部落格穿衣服的人
後記：夏娃破紀錄了，這一篇教學足足寫了三個小時!!!!!!
他X的累!!!
夏娃穿礼服很漂亮..^^祝你们白头谐老~(好像早了一点|||),祝你们一直幸福^^
辛苦了~~
看了头晕晕~~
辛苦了~这些programing的东西是你在学校学回来得吗？想问你哦~你那个夏娃的字型很特别,也是下载的吗？我找过很多字型但很多都下载不到的，只有少许,可以分享下你的特别字型吗？
我看的有点乱,哈哈!你好厉害哦,这些都是去那里学的呢?
夏娃很厉害，这个g完全不会~受教了！
呵呵呵，感谢你让我重温了半年前的噩梦…
虽然说我是学编程的，但是我就是不喜欢去动html,css这些东西 =.=|||
虽然读完过后本人还是很懒惰去学，不过谢了！
呵呵~~~
点击朋友的link,近来看一看！没想到竟然有美化的教学篇~实在是令读者受益不浅。尤其牵涉到programming和graphic edit的东东~你一定在这些方面花了不少功夫！继续加油哦！
我可没你那么有心机~工作上已经对着几个programming~在对下去我可要疯咯！
Good Job!!!
^^
辛苦了，
可以的话，做一个特辑~
nice Blog..^.^ Thanks for sharing the tips!!
OMG~~ what a useful tips…
thanks for sharing…
辛苦了。
ღ 美美の云ღ
之前我還不會的時候
也是看了頭暈XD
癫马流星
不是學校學的拉
自己找資料慢慢學的^^
那個夏娃的logo
不是字體來的,是我自己設計的
嫚嫚
到處收集資料然後自己研究的=)
g
別這麼說
你也有很多東西是我不會的^^
Exdeath
我不是學這方面的
但是我很有興趣=___=
song_4ever
不客氣
想用的時候儘管來看看
呵呵
~David~
我只是覺得很多人都想把自己的部落格弄得美美的
可是卻不會,我就教囉^^
gondolier
已經有這個打算的了
只是寫一篇就得花很長的時間
所以我儘量
呵呵～
TINTIN
不客氣,歡迎常來^^
BeverLy’s Secret
不客氣，希望可以幫到你哦︿︿
谢谢啊~~~
我的空才弄弄看吧。。。
我最近忙死了~
想学换部落格背景,但看到很多代码..昏倒了…
有没有简单的方法?
以前我的部落格也有背景~~后来太麻烦就弄掉了。
不是很明白。@@ 嘻嘻！我是电脑白痴耶！^^
想问一下啦！
上次我要换背景时，blog的其他功能（就好像歌啦）都被一起洗掉了。为什么会酱呢？要怎样才可以在换背景时不需要洗掉其他功能？
哈啰吉蒂猫！！！
天啊，夏娃，请受徒弟外星人三拜九叩头吧！
谢谢你的指导,我会试试看的哦!
我试过了,怎么都不行的??
ღ 迎迎ღ
呵呵
不客氣^^
yy
如果有簡單的
我為什麼還要教複雜的- -
沉默的吟游诗人
怎麼格麻煩法阿?
Forever HL
你是不是換整個template?
ET
你的瘋狂程度遠遠超越了我 = =
Pinkster
把你改的那一部份copy來我看看@@
哈哈~夏娃好有心思哦..不过怎么没教到像你的blog酱美的?
老实说,这篇比上一篇容易很多….因为有例子看…呵呵..
加油噢…
还有,谢谢你.
Sai Ling
我那个是为了容易做示范，所以用基本的来做嘛
沒任何設計可言
而且,一個blog美不美
不是只要會html就可以得了Q_Q
Wei Lin
不客氣
希望這對你有幫助^^
哇。。。下次的空去改改。。。
（慢慢等=.=）
娃娃～ 救命啦！ 我试了两天还是没有图片的阿。
ｈｔｍｌ的代码我都背起来（因为打太多次的关系）
图片的ｕｒｌ我是在ｐｈｏｔｏｂｕｃｋｅｔ复制来的。（HTML Code – Websites & Blogs）
＞．＜怎么办～怎么办～
success! hahaha
OMG！！！ 真是辛苦你了~ 一点也不乱~ 都看得懂~ ^^
我试过了，也成功了~ ^^ 真的很谢谢你哦~ 之前，我一直研究一直弄，都弄不到。看过你这篇教学后，我一弄就弄到了。很简单！感激不尽哦~~~ ^0^
其实这个真的不难~ 要打一篇这样的教学才难吧~ >.< 辛苦啦！！！ link 你了~ ^^
天使
哈哈
想改的時候來看吧^^
笨蛋小公主
恭喜美化成功^^
不過,之前是出了什麼問題呢?
毒蝎女
可以幫到你我很開心,呵呵^^
還是你對我好一點T___T
XD~~~
我弄到了,是copy我妹的html,然后加我的背景的网址,谢谢你的教学.
哇～ 再这样教下去我们这行不是没得混没饭开了 ^^
不错哦
template monster.com…. =,=
你的photoshop技巧很好。。。
你用Adobe CS3??
在纳闽看到你的人
大概是因为blog template的关系吧？忘了换成了minima..网址也copy错了。哈哈
总而言之，就是我忘记的太严重了~ 活该我试了两天。不过我打算找个另外的衣服给它。现在这个太眼花缭乱了，你觉得呢
Pinkster
不客氣^^
livz
我教的只是基本的嘛
又不是教人從o開始寫一個完整的出來XD~~~
不會砸掉你的飯碗的啦
呵呵XD~~~
匿名
是用cs3沒錯啦
恩請問你叫什麼名字啊- -
毎次來都匿名,不要將神秘啦XD
笨蛋小公主
原來如此
呵呵XD~~~放心吧minima還有很多東西可以玩的
(因為他什麼都沒有,所以可以加很多東西下去=___=)
我去看了你的blog一下
的確有點亂=____=
可以試試看色調溫和一點的圖案哦
叫我纳闽看到你的人就可以了。。。wakaka
不好意思留下名字嘛，先卖个关子。。。等我先做了我的blog才通知你。。。hehe(千扁)
反正在纳闽才一年，还有两年 (tips)
你的教学 template是不是参考templatemonster??
纳闽看到你的人上。
纳闽看到你的人上
哈哈
好吧
你開心就好Q_Q
我的教學是我在很多地方蒐集資料後
自己在整理然後寫出來的哦
不過謝謝介紹template monster那個網站
看起來好像很不錯XD
@.@”
看到我头晕了~~
刚刚开始学写blog~~请多多指教….
哇。。感觉很像读comp science的学生。很pro。我是在行的部落认识到你这部落的。有时候很想换我部落的背景，不过怕换了看起来很杂，不只会吗？
辛苦你了,谢噢
我尝试了很多次都不能，正确的写法该是 – bgcolor URL( ) repeat, 还是 – bgcolor ( ) repeat? 有没有（）？我的头好晕哦，试来试去都不能。。。 T_T
haha..nice post wor….add oil la..when i free, i oso wanna hv a try…:p hehe….u are so pro leh….:p
jordan
恩
終於都開blog了
哈哈
加油^^
兵家常客
其實只要選擇的背景圖案不會太複雜就可以了
還可以美化整個blog哦^^
贝壳丫头
不客氣^^
大头“霞”
正確的應該是
bgcolor url(圖片網址);
記得有一個 ; 哦@_@
試試看
如果還是不能的話就把你的html抄過來我看看
Helene 菏霖
不客氣
希望可以幫到你^^
还是不行哦。。我好苯哦！
background:$bgcolor url(http://rachelchoiha.lifelogger.com/685815); repeat;
有什么问题呢？
大头“霞”
恩…
你的圖片網址錯了
試試看這個
http://rachelchoiha.lifelogger.com/
media/photos0/685815_cwugdgqoav
_xxlarge.jpg?nwlrbbmqbh
ohh….我明白了。。。谢谢你哦！
夏娃!!
我弄不到啊!!
它讲:
“页面外观中的变量声明无效：使用了未定义的变量。 输入：bgcolor”
做么会这样的??
你把你那一段code copy来这里我看看~
对吗??
好像很长酱的!??
html code-websites&blogs:
对吗??
好像很长酱的!??
html code-websites&blogs:
background:$bgcolor URL()repeat;
对不起~~
我不懂做么我copy了~~
等到我submit过后我的code就不见了~~
我已经跟着以上的教学做了，一点反应也没有。。。T.T
谢谢分享哦
之前就是弄背景时超级生气
每次都是一块的在上面 @@晕
里面的娃娃icon也是你自己设计的吗？
谢谢你的教程^^
我终于把我喜欢的背景换上去了^^
squirting gusingchicks
squirting female orgasm
squirting pussy sex xxx
squirting tits free pics
squirtingpussy.com carly
squirthunter com
squirthunter.com
你的部落格功力很深哟，向你学习！
夏娃你好
我改過語法還是沒有任何改變
反而忽略繼續閱讀的語法
能不能把我原本的語法以及背景圖片網址複製給你
幫我看看要怎麼改？
victoria casino and hotel shingle springs red hawk casino too In the bolton grosvenor casino is focused on new painted hand casino is online poker legal in usa red rock casino pets tips de poker .may be el salvador casino .inside .Here .25 cent poker chips without inside lucky’s casino niagara mgm grand casino las vegas with Whith efx casino party poker double or nothing i’m with red earth casino employment .
不好意思
我照做了
可是面板還是沒變
以下是我的語法
body {
background:$bgcolor url http://farm3.static.flickr.com/2435/3895007065_ba13687842.jpg no-repeat;
background-position:50% 0%;
background-attachment:fixed;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
請問哪有問題
謝謝
第二行改成
background:$bgcolor url (http://farm3.static.flickr.com/2435/3895007065_ba13687842.jpg) no-repeat;
要有括弧～
Firefox 3系列 一致正常
IMAC機系列 一致正常
IE 6 和 IE 7 沒有出現背景圖…
本人的blog http://1p2k-game-acg.blogspot.com/
不知什麼問題 IE看不出來
但MAC機 和 Firefox 可以看出來
我覺的部落格背景圖深色一點比較好看(我個人覺得)例如:黑色、深紫色””夏娃!你覺得呢???
我是不喜欢深色背景啦
看到眼睛都痛
不过这是个人喜好问题，不需太在意别人的看法^^
为什么我都弄不到的？要去哪里get the code？photobucket 和 imageshack 都不行咧？
right click照片然后copy image location就行了