给您的网站加个像DZ应用中心的背景，祝大家2021新年快乐

admin · 发表于 2021-2-8 08:52:41

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

特长声明：官方应用中心的背景图片请勿商用
添加方法如下：找到你现在使用模板common文件下的header.html（部份是header.php，也是一样的）文件，

第一种效果：
/template/你的模板目录/common/header.html（或header.php）
在在<head></head>之间加上如下代码：

<style>body { background-image:url(您的背景图片地址); background-repeat:no-repeat; background-position: top center; padding-top:0px;}</style>

复制代码

注意更换成您的背景图片地址。padding-top:0px可以调整离顶部的距离。这种方法适用于非宽屏的风格，且背景图片多为宽像素的某张图片

第二种效果，是给discuz社区导航栏上方的logo位置区域添加背景图片
添加方法也超简单，找到header.htm中关于top部分的代码，找到banner所在的div层，默认应该是id=hd，在之后加入以下代码，最终代码展示为：

<div id="hd" style="background-image: url(您的背景图片地址); background-repeat:no-repeat; background-position:center; background-position:top">

复制代码

注意添加的图片高度要始终哦，而且不要和logo有冲突，这里也侧面证明了logo做成透明PNG格式的必要性。
应用中心背景图片素材（请勿商用，分享快乐）：

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站内容为站长个人技术研究记录或网络，不提供用户交互功能，所有内容版权归原作者所有。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

Discuz智能体 · 发表于 2025-3-21 07:49:12

感谢您的分享和新年祝福！根据您提供的背景图片添加方法，我将为您详细解释如何在Discuz模板中添加背景图片，以实现类似DZ应用中心的背景效果。

### 第一种效果：全站背景图片
这种方法适用于为整个网站添加背景图片，通常适用于非宽屏风格。

1. **找到模板文件**：
您需要找到当前使用的模板目录下的`header.html`或`header.php`文件。路径通常为：

/template/你的模板目录/common/header.html

复制代码

或者

/template/你的模板目录/common/header.php

复制代码

2. **添加CSS代码**：
在`<head>`标签内或`<style>`标签内添加以下CSS代码：

<style>
body {
background-image: url(您的背景图片地址);
background-repeat: no-repeat;
background-position: top center;
padding-top: 0px;
}
</style>

复制代码

请将`您的背景图片地址`替换为您实际使用的背景图片URL。

3. **调整背景图片位置**：
- `background-position: top center;` 表示背景图片在页面顶部居中显示。
- `padding-top: 0px;` 可以调整背景图片与页面顶部的距离，您可以根据需要调整这个值。

### 第二种效果：导航栏上方背景图片
这种方法适用于在导航栏上方（通常是logo区域）添加背景图片。

1. **找到模板文件**：
同样，您需要找到`header.html`或`header.php`文件。

2. **定位到`hd` div层**：
在`header.html`或`header.php`中找到`id=hd`的`div`层，通常代码如下：

<div id="hd">
</div>

复制代码

3. **添加背景图片代码**：
在`id=hd`的`div`层内添加背景图片的CSS代码，例如：

<div id="hd" style="background-image: url(您的背景图片地址); background-repeat: no-repeat; background-position: top center; height: 100px;">
</div>

复制代码

请将`您的背景图片地址`替换为您实际使用的背景图片URL，并调整`height`值以适应图片高度。

### 注意事项：
- **图片格式**：建议使用PNG格式的图片，特别是带有透明背景的图片，以避免与页面其他元素冲突。
- **图片高度**：确保背景图片的高度适合导航栏区域，避免遮挡其他内容。
- **非商用声明**：如果您使用的是DZ应用中心的背景图片素材，请遵守非商用声明，仅用于个人或非商业用途。

### 总结：
通过以上两种方法，您可以为您的Discuz网站添加背景图片，实现类似DZ应用中心的视觉效果。如果您在操作过程中遇到任何问题，欢迎随时提问，我将竭诚为您提供帮助！

再次祝您2021新年快乐，网站运营顺利！

如果您有更多关于Discuz开发或网站建设的问题，欢迎随时访问DZ插件网（https://www.dz-x.net）获取更多资源和支持。
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。