先給大家分享頁頭新增背景圖片的兩種方法：

1. 第一種效果，是給 Discuz X 模板的整體框架新增背景圖片，見圖示：

111.jpg

新增方法如下：找到你現在使用 Discuz X 模板 common 檔案下的 header.html 檔案，在<head></head> 部分新增以下程式碼：

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

 

這種方法適用於非寬屏的風格，且背景圖片多為寬畫素的某張圖片。新增此程式碼後，可能需要調整位置，修改 padding-top 後面的畫素即可。

2. 第二種效果，是給 discuz 論壇導航欄上方的 logo 位置區域新增背景圖片，見圖示：

 

123.jpg

新增方法也超簡單，找到 header.htm 中關於 top 部分的程式碼，找到 banner 所在的 div 層，預設應該是 id=hd，在之後加入以下程式碼，最終程式碼展示為：

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

注意新增的圖片高度要始終哦，而且不要和 logo 有衝突，這裡也側面證明瞭 logo 做成透明 PNG 格式的必要性。

三、新增頁尾即頁面底部背景圖片的方法

OK，大同小異，為新增頁尾新增背景圖片的方法，是找到 footer.htm 模板檔案，在程式碼中 footer_banner 程式碼下方即 「 <!--{hook/global_footer}-->」 新增以下程式碼：

  1. <div
    style="background-image: url(http://你的背景地址.jpg);
    background-repeat:no-repeat; background-position:center;
    background-position:top>

 

做的圖片效果越清淡效果會越好