背景图片能彻底改变你的 WordPress 网站的外观和感觉。但拉伸的图片、不正确的对齐方式或文件大小问题可能会成为障碍。尤其是当你不知道使用哪种方法时。
根据我们管理数十个 WordPress 网站的经验，我们发现大多数人把这件事搞得比实际复杂得多。
好消息是，WordPress 提供了几种内置选项来添加背景图片，此外还有一些优秀的插件让操作更加简单。一旦掌握了正确的方法，你只需点击几下就能为整个网站、单个页面或特定区域添加漂亮的背景。
在本指南中，我们将向你展示 5 种可靠的方法 来在 WordPress 中添加背景图片，适合任何技能水平。
为什么要在 WordPress 中添加背景图片？
为你的 WordPress 网站添加图片可以使其对访客更具吸引力。你可以快速抓住用户的注意力，让他们与你的内容互动。
此外，它还能让你根据品牌个性化网站设计。例如，你可以在背景中上传产品图片或品牌吉祥物。
你还可以添加 YouTube 视频作为全屏背景，或使用图片幻灯片来让内容更生动。
不过，我们建议选择不会分散注意力或不影响内容可读性的背景图片。背景应该增强用户体验，帮助向访客传达信息。
另外，选择移动端友好且不影响网站加载速度的背景图片也很重要。否则会损害你的 WordPress SEO。
在本文中，我们将分享多种在 WordPress 中添加背景图片的方法。
我们将涵盖多种方法，包括 WordPress 主题定制器、全站编辑器、插件、主题构建器等。只需点击以下链接跳转到你偏好的部分：
- 方法 1. 使用 WordPress 主题定制器添加背景图片
- 方法 2. 使用全站编辑器添加自定义背景图片
- 方法 3. 使用 WordPress 主题构建器添加背景图片
- 方法 4. 使用 CSS Hero 添加背景图片
- 方法 5. 使用 CSS 代码在 WordPress 任意位置添加自定义背景图片
- 额外资源：提升 WordPress 网站用户体验的图片和媒体文件指南
准备好了吗？我们开始吧。
方法 1. 使用 WordPress 主题定制器添加背景图片
大多数流行的 WordPress 主题都支持自定义背景功能。此功能可让你轻松设置背景图片。如果你的主题支持，我们推荐使用此方法。
但是，如果你的定制器菜单选项缺失，那么你的主题可能启用了全站编辑功能。在下一节中，我们将介绍如何使用全站编辑器更改背景图片。
要使用“定制器”，你需要访问 WordPress 后台的 外观 » 定制 页面。
这将启动 WordPress 主题定制器，你可以在实时预览网站的同时更改不同的主题设置。
注意：你看到的选项取决于你使用的 WordPress 主题。在本教程中，我们使用的是 Sydney 主题。
如果你使用的是其他主题，可能需要查阅该主题的文档。如果在定制器找不到背景图片选项，也可以联系主题开发者询问如何添加。
在 Sydney 主题的定制器选项中，你需要点击左侧面板中的“General”。
完成后你会看到不同的“General”选项。此时点击“Background Image”部分。
在下一个屏幕上，你会看到添加背景图片的选项。点击“Select image”按钮。
这会打开 WordPress 媒体库。你可以从电脑上传图片，或选择之前上传过的。
选择图片后，点击“Select”按钮。媒体弹窗关闭，你会在主题定制器中看到所选背景图片的预览。
在左侧面板中，你可以调整图片的位置（顶部、居中、底部、左、右）来控制背景显示效果。还可以通过“Image Size”下拉菜单调整大小，以“适应”、“填充”或“覆盖”区域。
如果希望图片重复显示，请勾选“Repeat Background Image”。勾选“Scroll with Page”可使图片随页面内容滚动。
满意后点击顶部的“Publish”按钮保存设置。这样就成功添加了背景图片。访问你的网站查看效果吧。
方法 2. 使用全站编辑器添加自定义背景图片
如果你使用的是基于块的 WordPress 主题，则可以通过全站编辑器（FSE）添加自定义背景图片。
全站编辑器允许你使用块编辑网站设计，就像使用 WordPress 块编辑器编辑文章或页面一样。
本教程使用默认的“Twenty Twenty-Two”主题。要启动全站编辑器，请前往 WordPress 后台的 外观 » 编辑。
进入全站编辑器后，你需要添加一个“Cover”块来上传背景图片。点击顶部的“+”号，添加“Cover”块。
点击“Upload”或“Media Library”按钮，将图片添加到 Cover 块。这将打开 WordPress 媒体上传弹窗。
选择图片后点击“Select”按钮。
图片添加到 Cover 块后，需要将其设置为页面背景。点击顶部的“List View”图标（三条横线），打开主题元素的大纲视图，例如网站页眉和页脚。
然后，将列表视图中所有模板元素拖放到“Cover”块下方。这样 Cover 块的图片就会显示为网站背景。
之后，你可以点击 Cover 块，然后点击屏幕右上角的齿轮图标，打开“Block”设置面板。在这里你可以设置固定背景、调整叠加层、编辑颜色等。
完成后点击“Save”按钮。这样就成功使用全站编辑器添加了背景图片。
方法 3. 使用 WordPress 主题构建器添加背景图片
另一种添加自定义背景图片的方法是使用 WordPress 主题构建器，比如 SeedProd。它是最好的 WordPress 落地页插件，具有拖放功能，无需写一行代码即可轻松自定义网站设计。
猫哥也在一些品牌网站上使用 SeedProd，效果很好。更多详情可查看我们的 SeedProd 评测。
本教程使用 SeedProd Pro 版本，因为它包含主题构建器。也有免费版 SeedProd Lite 可供尝试。
首先，安装并激活 SeedProd 插件。如有需要，请参阅如何安装 WordPress 插件。
激活后，你会看到 WordPress 仪表盘中的 SeedProd 欢迎界面。输入许可证密钥并点击“Verify Key”按钮激活专业版。你可以在 SeedProd 账户中找到许可证密钥。
完成后，前往 SeedProd » Theme Builder。点击顶部的“Themes”按钮。
SeedProd 会提供多个主题模板供你选择。将鼠标悬停在任意模板上并点击。本教程使用“Starter”主题模板。
SeedProd 会生成不同的模板，如首页、单篇文章、单页、侧边栏、页眉等。要添加应用于整个网站和所有主题模板的背景图片，请点击“Global CSS”下的“Edit Design”。
在下一个屏幕上，你可以更改全局 CSS 设置。点击“Background”选项开始自定义。
之后你会看到“Background Image”选项。点击“Use Your Own Image”上传图片，或点击“Use a Stock Image”搜索图库图片作为背景。
添加背景图片后，SeedProd 构建器会显示实时预览。你可以调整背景位置，选择全屏覆盖或重复等选项。还可以通过移动“Dim Background”滑块来调整图片暗度，数值越高图片越暗。
完成后点击顶部的“Save”按钮，关闭全局 CSS 设置。如果想为网站的不同部分添加自定义背景图片，可以在 SeedProd 中编辑各个主题模板。更多详情请参考如何轻松创建自定义 WordPress 主题。
方法 4. 使用 CSS Hero 添加背景图片
CSS Hero 是一款 WordPress 插件，无需编码即可对主题进行任何更改。你可以通过几个简单步骤快速添加背景图片。首先安装并激活 CSS Hero 插件，详情参考如何安装 WordPress 插件。
完成后，打开浏览器中的网站首页。在管理栏中你会看到“Customize with CSS Hero”链接。
点击该链接，CSS Hero 选项会打开。将鼠标悬停在要添加图片的区域上，然后点击该区域，在左侧边栏中访问“Background”选项。
点击“Background”，然后点击“Image”。你可以从 Unsplash 选择图片或上传自己的图片作为背景。
点击图片后，会出现“Apply Image”按钮。然后选择图片大小，建议选择大版本以便图片铺满页面。最后点击底部的“Save and Publish”保存背景图片。
方法 5. 使用 CSS 代码在 WordPress 任意位置添加自定义背景图片
默认情况下，WordPress 会为网站中不同的 HTML 元素添加多个 CSS 类。你可以利用这些自动生成的 CSS 类，轻松为单个文章、分类、作者页面等添加自定义背景图片。
例如，如果你有一个名为“电视”的分类，WordPress 会在访问该分类页面时自动向 body 标签添加以下 CSS 类：
<body class="archive category category-tv category-4">你可以使用检查工具查看 WordPress 添加到 body 标签的 CSS 类。示例：
你可以使用 category-tv 或 category-4 类来单独设置该分类页面样式。
例如，我们为分类存档页面添加自定义背景图片。虽然修改主题的 functions.php 文件是常见做法，但这并不安全，也不适合新手。一个小错误就可能导致网站崩溃。
因此我们一直推荐使用 WPCode 插件。它是最好的添加自定义代码片段的插件，无需麻烦。
我们在多个品牌中使用 WPCode 来添加和管理代码片段，简单高效。如果你了解更多，请查看我们的 WPCode 评测。
首先安装并激活 WPCode 插件。如有需要，请参考如何安装 WordPress 插件。
注意：你可以使用免费版 WPCode 添加自定义 CSS 代码片段。但升级到 WPCode Pro 可以访问所有片段的完整历史记录、添加社交媒体跟踪像素、调度代码等更多功能。
激活后，前往 WordPress 后台的 Code Snippets » + Add New。在下一个屏幕上，将鼠标悬停在“Add Your Custom Code (New Snippet)”选项上，当出现“Use snippet”按钮时点击。
在下一个屏幕上，为你的自定义 CSS 片段添加标题。然后输入以下自定义 CSS：
body.category-tv {
background-image: url("http://example.com/wp-content/uploads/2017/03/your-background-image.jpg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}不要忘记将背景图片 URL 和分类类名替换为你网站自己的。在 WPCode 编辑器中，将“Code Type”设置为“CSS Snippet”。一切正常后，切换开关激活代码片段，并点击“Save Snippet”。
此外，你还可以为单个文章和页面添加自定义背景。WordPress 会在 body 标签中添加包含文章或页面 ID 的 CSS 类。使用相同的 CSS 代码，只需将 .category-tv 替换为文章特定的 CSS 类即可。
更多详情请参阅 如何在 WordPress 中添加自定义 CSS。
额外资源：提升 WordPress 网站用户体验的图片和媒体文件指南
希望本文能帮助你学会如何在 WordPress 中添加背景图片。你可能还想查看以下指南：
- 如何在 WordPress 中正确添加图片
- 如何在 WordPress 中创建图片画廊
- 如何创建视频和图片 WordPress 轮播
- 如何在 WordPress 的上下文章链接中添加缩略图
- 如何在 WordPress 中嵌入 Spotify
- 如何在 WordPress 中嵌入 Apple Podcasts
- 最佳网站设计软件
- 如何优化图片提升网页性能而不损失质量
如果你喜欢这篇文章，请订阅我们的 YouTube 频道 获取 WordPress 视频教程。你也可以在 Twitter 和 Facebook 上找到我们。