先给大家分享页头添加背景图片的两种方法：

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>

 

做的图片效果越清淡效果会越好