★Discuz 论坛添加页头及页尾背景图片的几种美化方法★（原创教程/适用DZ各版本）

pascaller · 发表于 2011-3-22 09:29:44

本帖最后由 pascaller 于 2012-2-20 17:54 编辑

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

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

码这么多字不容易，请朋友们在社区龙虎榜评选活动中为《去非洲网》投上宝贵的一票，非常感谢！
投票地址: http://zz.comsenz.com/2012px/index.php?action=info&id=636

首先声明：这个帖子我前几天发布过，但是因为周末的时候我编辑了一下，就被审核起来了，后来我又编辑回去，还是处于审核状态，简直无语。联系风格区斑斑，班班很热心，但就是找不到这个帖子。联系管理员，没人理，只能从新发布了。互联网共同分享的精神要传承发扬下去，所以偶重新发布，希望大家支持！

pascaller · 发表于 2011-3-22 09:54:14

本帖最后由 pascaller 于 2011-3-22 19:01 编辑

怎么还是处于审核状态呀？？

终于审核通过了，不容易啊，我之前的那个帖子已经80多个跟帖了，把那个给我删了，这个给我留下来了，有点小郁闷，不过最终还是搞定了，庆祝一下，希望大家继续支持哈！(EM:131:)

原帖截图：

宝蓝夫人 · 发表于 2011-4-17 22:50:20

支持
需要这个

沃尔 · 发表于 2011-4-27 15:36:20

我也来顶顶帖看看

铭阳传媒 · 发表于 2011-4-27 17:21:37

支持一下啊

ahtatu · 发表于 2011-4-27 17:24:09

www.0562ren.com  铜陵人网
forum.0562ren.com 铜陵论坛
group.0562ren.com  铜陵群组
home.0562ren.com 铜陵家园
pinpai.0562ren.com  铜陵商家

bests · 发表于 2011-4-27 22:54:40

zzyxz · 发表于 2011-4-28 01:38:04

(EM:131:)两个帖子我都顶下

ilei365 · 发表于 2011-4-28 01:38:33

wangchao008 · 发表于 2011-4-28 01:51:04

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

[发布] ★Discuz 论坛添加页头及页尾背景图片的几种美化方法★（原创教程/适用DZ各版本）

评分

不容易啊，终于审核通过了！