---
title: "Flarum 欢迎横幅首页加入背景 - 一纸忘忧"
description: "首先说一下，又是一篇没什么卵用的 Flarum 美化教程，本文只能在全站的 Banner 加入背景而已。如果有人说要是能随着分类变化就好了，不好意思，Beta 8 Toby 已经计划完全取消欢迎横幅，到时这玩意是不存在的，所以本文估计很快就会失效，仅供 B7 版本使用。 欢迎横幅加入背景（如果使用大图，请尽量选择宽不低"
canonical_url: "https://www.ikxin.com/article/flarum-welcome-background"
last_updated: "2026-09-16T09:59:27.259Z"
locale: zh-cn
meta:
  "og:description": "首先说一下，又是一篇没什么卵用的 Flarum 美化教程，本文只能在全站的 Banner 加入背景而已。如果有人说要是能随着分类变化就好了，不好意思，Beta 8 Toby 已经计划完全取消欢迎横幅，到时这玩意是不存在的，所以本文估计很快就会失效，仅供 B7 版本使用。 欢迎横幅加入背景（如果使用大图，请尽量选择宽不低"
  "og:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~RmxhcnVtIOasoui~juaoquW5hemmlumhteWKoOWFpeiDjOaZryAtIOS4gOe6uOW~mOW~pw%2Cc_Article%2Ctitle_~RmxhcnVtIOasoui~juaoquW5hemmlumhteWKoOWFpeiDjOaZrw%2Cdescription_~6aaW5YWI6K-05LiA5LiL77yM5Y-I5piv5LiA56-H5rKh5LuA5LmI5Y2155So55qEIEZsYXJ1bSDnvo7ljJbmlZnnqIvvvIzmnKzmloflj6rog73lnKjlhajnq5nnmoQgQmFubmVyIOWKoOWFpeiDjOaZr-iAjOW3suOAguWmguaenOacieS6uuivtOimgeaYr-iDvemaj-edgOWIhuexu-WPmOWMluWwseWlveS6hu-8jOS4jeWlveaEj-aAne-8jEJldGEgOCBUb2J5IOW3sue7j-iuoeWIkuWujOWFqOWPlua2iOasoui~juaoquW5he-8jOWIsOaXtui~meeOqeaEj-aYr-S4jeWtmOWcqOeahO-8jOaJgOS7peacrOaWh-S8sOiuoeW-iOW~q-WwseS8muWkseaViO-8jOS7heS-myBCNyDniYjmnKzkvb~nlKjjgIIg5qyi6L-O5qiq5bmF5Yqg5YWl6IOM5pmv77yI5aaC5p6c5L2~55So5aSn5Zu-77yM6K-35bC96YeP6YCJ5oup5a695LiN5L2O%2CsiteName_~5LiA57q45b-Y5b-n%2CsiteHost_www.ikxin.com%2Cp_Ii9hcnRpY2xlL2ZsYXJ1bS13ZWxjb21lLWJhY2tncm91bmQi%2Cs_pA44AK8adFBGosZ0.png"
  "og:image:alt": "Flarum 欢迎横幅首页加入背景 - 一纸忘忧"
  "og:image:height": "630"
  "og:image:type": image/png
  "og:image:width": "1200"
  "og:title": "Flarum 欢迎横幅首页加入背景"
  "twitter:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~RmxhcnVtIOasoui~juaoquW5hemmlumhteWKoOWFpeiDjOaZryAtIOS4gOe6uOW~mOW~pw%2Cc_Article%2Ctitle_~RmxhcnVtIOasoui~juaoquW5hemmlumhteWKoOWFpeiDjOaZrw%2Cdescription_~6aaW5YWI6K-05LiA5LiL77yM5Y-I5piv5LiA56-H5rKh5LuA5LmI5Y2155So55qEIEZsYXJ1bSDnvo7ljJbmlZnnqIvvvIzmnKzmloflj6rog73lnKjlhajnq5nnmoQgQmFubmVyIOWKoOWFpeiDjOaZr-iAjOW3suOAguWmguaenOacieS6uuivtOimgeaYr-iDvemaj-edgOWIhuexu-WPmOWMluWwseWlveS6hu-8jOS4jeWlveaEj-aAne-8jEJldGEgOCBUb2J5IOW3sue7j-iuoeWIkuWujOWFqOWPlua2iOasoui~juaoquW5he-8jOWIsOaXtui~meeOqeaEj-aYr-S4jeWtmOWcqOeahO-8jOaJgOS7peacrOaWh-S8sOiuoeW-iOW~q-WwseS8muWkseaViO-8jOS7heS-myBCNyDniYjmnKzkvb~nlKjjgIIg5qyi6L-O5qiq5bmF5Yqg5YWl6IOM5pmv77yI5aaC5p6c5L2~55So5aSn5Zu-77yM6K-35bC96YeP6YCJ5oup5a695LiN5L2O%2CsiteName_~5LiA57q45b-Y5b-n%2CsiteHost_www.ikxin.com%2Cp_Ii9hcnRpY2xlL2ZsYXJ1bS13ZWxjb21lLWJhY2tncm91bmQi%2Cs_pA44AK8adFBGosZ0.png"
  "twitter:image:alt": "Flarum 欢迎横幅首页加入背景 - 一纸忘忧"
---

> Index of every page on this site: [llms.txt](https://www.ikxin.com/llms.txt)

# **Flarum 欢迎横幅首页加入背景**

2018.07.28 7,008  0

## 正文

首先说一下，又是一篇没什么卵用的 Flarum 美化教程，本文只能在全站的 Banner 加入背景而已。如果有人说要是能随着分类变化就好了，不好意思，Beta 8 Toby 已经计划完全取消欢迎横幅，到时这玩意是不存在的，所以本文估计很快就会失效，仅供 B7 版本使用。

## 过程

欢迎横幅加入背景（如果使用大图，请尽量选择宽不低于 1920px 的图片，使用允许重复的图片例外）。

后台 — 外观设置 — 编辑自定义样式，加入

 CSS

```
.Hero {
    background: url(图片链接) no-repeat top fixed;
    text-align: center;
    color: #FFFFFF;
    height: 180px;
    width: 100%;
}
```

如果是允许重复图片，请修改其中 `no-repeat` 为 `repeat-x` 或者 `repeat-y`（横向重复和纵向重复），如果横向纵向都要重复的话就是 `repeat`。

首页添加背景方法（如果添加了欢迎横幅背景，这个首页背景的横幅部分会被欢迎横幅背景覆盖）。

后台 — 外观设置 — 编辑自定义样式，加入

 CSS

```
.IndexPage {
    background: url(图片链接) no-repeat center fixed;
    background-size: contain;
}
```

## 演示图

![演示图](https://www.ikxin.com/_ipx/animated_true&w_1734&f_webp/https://img.8b5.cn/2019/06/27/5d145f7461443.png)

## **评论**

(0)

暂无评论，来说两句吧

## **发布评论**

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://www.ikxin.com/#website","@type":"WebSite","description":"一纸忘忧的个人网站，关于技术探索与日常生活，记录 Web 开发、服务端与 DevOps 实践，分享软件工具、数码体验，以及代码之外的见闻与思考。","inLanguage":"zh-CN","name":"一纸忘忧","url":"https://www.ikxin.com/","workTranslation":[{"@id":"https://www.ikxin.com/zh-tw#website"},{"@id":"https://www.ikxin.com/ko#website"},{"@id":"https://www.ikxin.com/en#website"},{"@id":"https://www.ikxin.com/ja#website"}]},{"@id":"https://www.ikxin.com/article/flarum-welcome-background#webpage","@type":"WebPage","description":"首先说一下，又是一篇没什么卵用的 Flarum 美化教程，本文只能在全站的 Banner 加入背景而已。如果有人说要是能随着分类变化就好了，不好意思，Beta 8 Toby 已经计划完全取消欢迎横幅，到时这玩意是不存在的，所以本文估计很快就会失效，仅供 B7 版本使用。 欢迎横幅加入背景（如果使用大图，请尽量选择宽不低","name":"Flarum 欢迎横幅首页加入背景","url":"https://www.ikxin.com/article/flarum-welcome-background","isPartOf":{"@id":"https://www.ikxin.com/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://www.ikxin.com/article/flarum-welcome-background"]}]}]}
```

## Sitemap

See the full [sitemap](https://www.ikxin.com/sitemap.md) for all pages.