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

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>

 

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