Discuz X2.5详细讲解页头页尾背景图片的多种修改方法

dly · 发表于 2013-1-12 20:56:27

1. 第一种效果，是给Discuz的整体框架添加背景图片，见图示：

添加方法如下：找到你现在使用模板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>

复制代码

这种方法适用于非宽屏的风格，且背景图片多为宽像素的某张图片。添加此代码后，可能需要调整位置，修改padding-top后面的像素即可。

2. 第二种效果，是给discuz论坛导航栏上方的logo位置区域添加背景图片，见图示：

添加方法也超简单，找到header.htm中关于top部分的代码，找到banner所在的div层，默认应该是id=hd，在之后加入以下代码，最终代码展示为：

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

复制代码

注意添加的图片高度要始终哦，而且不要和logo有冲突，这里也侧面证明了logo做成透明PNG格式的必要性。

3、添加页尾即页面底部背景图片的方法

OK，大同小异，为添加页尾添加背景图片的方法，是找到footer.htm模板文件，在代码中footer_banner代码下方即“ ”添加以下代码：

游客，如果您要查看本帖隐藏内容请回复

MacCloudHK · 发表于 2013-1-15 21:40:49

看到这帖子真是高兴！真是被感动的痛哭流涕……

ZXY280 · 发表于 2013-1-16 13:19:54

这个有没有演示呢？

蔚蓝的天空 · 发表于 2013-1-24 15:43:59

激动人心，无法言表！

游戏吧丶小磊 · 发表于 2013-1-29 15:56:30

楼主加油，我们都看好你哦。

游戏吧丶小磊 · 发表于 2013-1-29 15:58:52

强烈支持楼主ing……

物联网络论坛 · 发表于 2013-1-29 23:44:40

支持下啦！

茉格锦辞ˇ · 发表于 2013-1-30 19:34:04

看到这帖子真是高兴！

【海风】 · 发表于 2013-2-7 18:29:14

真是难得给力的帖子啊。

一辈子的梦 · 发表于 2013-2-16 23:38:32

强烈支持楼主ing……

Discuz X2.5详细讲解页头页尾背景图片的多种修改方法

相关帖子