DISCUZ论坛添加页头及页尾背景图片的几种方法（原创教程）

pascaller · 发表于 2011-2-15 10:44:04

本帖最后由 pascaller 于 2012-12-16 09:36 编辑

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

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格式的必要性。

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

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

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

复制代码

做的图片效果越清淡效果会越好，具体演示请参阅演示站：http://www.qufeizhou.com

快乐草民 · 发表于 2011-2-15 10:53:25

支持，辛苦了，我来给你加。

pascaller · 发表于 2011-2-15 10:58:14

谢谢楼上的朋友！！

maomaodegege · 发表于 2011-2-15 11:48:18

耕田人民割禾草 · 发表于 2011-2-15 12:03:44

学习了。太好了

sisy28 · 发表于 2011-2-15 13:32:44

很好，收藏了。

西北同乡网 · 发表于 2011-2-15 13:38:17

不错！！！！！！！

pascaller · 发表于 2011-2-15 16:34:39

谢谢支持！！

zhaowenyang · 发表于 2011-2-15 18:25:08

回复 pascaller 的帖子

pascaller · 发表于 2011-2-16 09:30:34

谢谢！！

		自动登录	找回密码
密码			立即注册

DISCUZ论坛添加页头及页尾背景图片的几种方法（原创教程）

本帖子中包含更多资源

评分