詳解如何給DISCUZ增加頁(yè)頭及頁(yè)尾背景圖片的多種方法教程

2015-1-28 20:11| 發(fā)布者: discuz美化| 查看: 555| 評(píng)論: 0|原作者: discuz美化

摘要: 1. 第一種效果，是給discuz的整體框架添加背景圖片，見(jiàn)圖示：添加方法如下：找到你現(xiàn)在使用模板common文件下的header.html文件，在head/head部分添加以下代碼： stylebody { background-image:url(你的背景 ...

1. 第一種效果，是給discuz的整體框架添加背景圖片，見(jiàn)圖示：

添加方法如下：找到你現(xiàn)在使用模板common文件下的header.html文件，在<head></head>部分添加以下代碼：

<style>body { background-image:url(你的背景圖片地址,如http://abc.com/imgs/bg.jpg); background-repeat:no-repeat; background-position: top center; padding-top:40px;}</style>

復(fù)制代碼

這種方法適用于非寬屏的風(fēng)格，且背景圖片多為寬像素的某張圖片。添加此代碼后，可能需要調(diào)整位置，修改padding-top后面的像素即可。

2. 第二種效果，是給discuz論壇導(dǎo)航欄上方的logo位置區(qū)域添加背景圖片，見(jiàn)圖示：

添加方法也超簡(jiǎn)單，找到header.htm中關(guān)于top部分的代碼，找到banner所在的div層，默認(rèn)應(yīng)該是id=hd，在之后加入以下代碼，最終代碼展示為：

<div id="hd" style="background-image: url(static/image/xxx.jpg); background-repeat:no-repeat; background-position:center; background-position:top">

復(fù)制代碼

注意添加的圖片高度要始終哦，而且不要和logo有沖突，這里也側(cè)面證明了logo做成透明PNG格式的必要性。

3、添加頁(yè)尾即頁(yè)面底部背景圖片的方法

OK，大同小異，為添加頁(yè)尾添加背景圖片的方法，是找到footer.htm模板文件，在代碼中footer_banner代碼下方即“ ”添加以下代碼：