将背景图片添加到您的 WordPress 网站很容易。 对？

多半是对的。 除非你的主题不支持它。 事实是，当今的许多 WordPress 主题都具有用于添加或更改现有背景图像的快速简便的设置。 与默认的 WP 外观自定义一样。

您还可以使用 CSS 或通过各种插件更改背景，打开用于在页面、帖子和类别上设置背景图像的选项。

在本文中，我们将向您展示如何执行上述所有操作，并让您的网站以您自己选择的引人注目的外观脱颖而出。

继续阅读，或使用以下链接跳转：

• 使用默认的 WordPress 自定义添加背景图像
• 使用插件添加背景图像
• 使用 CSS 添加背景图像
  • 全站背景图片
  • 特定类别背景图片
• 将背景图像添加到特定区域
• 回到（地面）基础

为什么要换背景？ 好吧，您的主题默认图像可能不会吸引您，或者感觉它与您的品牌相符。 或者，也许它根本不是图像，只是颜色。 或者也许您最初喜欢这张图片，但您已经厌倦了。

不管是什么原因，让我们尝试改变它。

使用默认的 WordPress 自定义添加背景图像

WordPress 主题可以有彩色背景或背景中的默认照片。 大多数人选择用更适合他们的品味和网站品牌的图像和/或颜色替换这些。

要在默认的 WordPress 编辑器中添加背景图片，您需要按照以下步骤操作：

• 从 WP 仪表板，转到 外观 > 自定义 > 背景图片 或者 外观 > 背景/背景图像.
• 点击 选择图像 按钮打开您的媒体库。
• 通过从您的计算机上传或从您的媒体库中选择一个来选择所需的图像。
• 一旦你选择了你想要的图像，点击蓝色 选择图片 按钮。
• 在左侧菜单的顶部窗口中，您将看到您的选择填充。 在右侧，您会看到网站主页的全尺寸预览，以及背景图片。

如果你喜欢你所看到的，请点击蓝色 发布 右上角的按钮，你就完成了！

如果您想在最终确定之前更改它的外观，您可以使用许多设置和选项来找到您喜欢的外观。

背景图像菜单编辑工具及其相关选项如下：

• 预设
  • 默认、填充屏幕、适合屏幕、重复、自定义
• 图像位置
  • 居中、右上、右中、右下、中下、左上、左中、左下、上中
• 图片大小
  • 原始、适合屏幕、填充屏幕
• 重复背景图像 – 复选框
• 随页面滚动 – 复选框

使用编辑工具查看您最喜欢的尺寸、图案和位置。 从子菜单中选择任何下拉选项将为您提供右侧页面的结果预览。

不要担心被任何事情卡住。 随时可以轻松返回设置并更改背景图像（和相关选项）。

使用插件添加背景图像

WordPress.org 上有几个插件可以完成添加背景图像的任务。

仅举几例：高级 WordPress 背景、全背景管理器和简单的全屏背景图像。

后者是我最喜欢的，所以这就是我将在本教程中使用的。

简单的全屏背景图像 可以轻松安装和设置全屏图像作为您网站的背景。 它使用浏览器自动缩放图像，这意味着图像始终充满屏幕。

将其付诸行动只需要几个简单的步骤。 有一个付费/专业版可以添加其他功能，但免费版是我们在这个练习中所需要的。

现在让我们使用该插件添加全屏背景图像。

1. 安装并激活 简单的全屏背景图像 插入。
2. 从 WP 仪表板，转到 外观 > 全屏背景图片.
3. 通过从您的计算机上传或从您的媒体库中选择一个来选择所需的图像。
4. 一旦你选择了你想要的图像，点击蓝色 使用图片 按钮。
5. 点击蓝色 保存选项 按钮，然后查看您的网站。

你有它！ 该图像现在应该作为全屏背景图像显示在您的网站上。

我想提一下这个插件的背景图像设置覆盖了默认的 WP 自定义背景设置。 这不是坏事，只是要注意一些事情。

可以使用此特定插件为单个帖子、页面、类别、标签等设置背景图像，但需要购买专业版。

使用 CSS 添加背景图像

现在我们将探索如何使用 CSS 代码更改背景图像。 可以使用 WP 主题定制器来制作全站点或特定类别的背景。

1. 从您的 WordPress 仪表板，导航到 外观 > 定制.
2. 向下滚动并点击 额外的 CSS.
3. 将适当的代码粘贴到 CSS 字段中，如下所示：

全站背景图片：

确保将持有人文本替换为“图片网址” 代码中带有图像文件 URL 的实际名称。 要查看此内容，请选择媒体库中的任何图像，然后查看屏幕右侧的图像信息。

特定类别背景图片：

确保替换上面代码中的两个持有人文本区域：

• “的图像文件 URL 的实际名称图片网址”
• 一个有效的类别名称 猫名

要查找类别名称：

1. 导航到您的 WordPress 网站仪表板
2. 点击 帖子 > 分类
3. 选择您要引用的类别，然后将鼠标悬停在“编辑”链接； 您将在页面左下方看到 URL，其中显示了类别 ID

请记住，这是硬编码的，因此某些插件可能不会延迟加载图像，或者无法将其索引到 CDN。

将背景图像添加到特定区域

还有另一个不错的插件可以帮助将背景图像添加到特定的内容区域。

这 高级 WordPress 背景 WordPress 插件允许使用古腾堡块添加背景。 您可以将颜色、图像甚至视频设置为背景，这些都可以在移动设备上查看。

它还允许为背景图像和视频添加视差效果。

在本例中，我们只是将静态背景图像添加到内容区域，特别是 Post。

因为这适用于古腾堡块，所以您需要使用古腾堡编辑器，所以如果需要，请确保从经典编辑器模式切换。

安装并激活插件后，导航到 WordPress 仪表板。

1. 点击 发布 > 添加新.

2.点击加号 + 按钮，向下滚动到 设计 部分，然后单击 空运单 堵塞。

我们想要进行的任何编辑的工具栏位于两个区域：顶部图标栏和侧边菜单栏。

3. 从任一菜单（我更喜欢使用侧栏），单击 图片 顶部的栏（介于 颜色 & 视频)，然后点击蓝色 选择图像 按钮下方，它将打开您的媒体库。

4.选择你想要的图片，然后点击蓝色 选择 按钮。

完成后，您应该会看到图像现在是 AWB 块的一部分。 （如果您没有看到它，请单击 AWB 图标栏中的图片图标，它应该会弹出来。）

使用菜单设置，您可以更改图像的位置（基于轴上的指示器）、大小、间距等。我将百分比设置保留为默认的 50/50（将其直接放在中间），并且Full 和 Cover 的大小默认值。

所以现在我们有了帖子背景，我们需要添加实际的帖子内容/文本。

1. 点击加号 + 位于块中的按钮 在背景图像的顶部.

2. 点击 段落 图标，它将在我们的背景图像顶部添加一个文本块。

输入您的文本内容，然后根据需要更改对齐方式或文本颜色（我做了，但它是可选的），瞧！ 我们有一个带有自己个人背景图片的帖子。

您可以将其设置为只有您帖子的一部分具有背景图片，这给了它一些魅力。 只需在背景图像之前和之后添加额外的段落块。

很酷。

回到（地面）基础

为您的 WordPress 网站添加背景似乎是一件小事。 但如果做得好，它可以产生很大的影响。 它还可以帮助您保持在线状态的新鲜感，这样访问者就不会因为一遍又一遍地看到相同的图片而感到厌烦。

使用主题功能的内置自定义来添加背景图像是理想的选择，因为它是专门为编码工作而设计的。

但是，在放置 WordPress 背景图像时，您确实有其他选择。 WP 核心自定义、插件、页面构建器和 CSS 调整，都可以对使用的图像和位置进行微调控制。

所以继续吧，利用你的背景发挥创意。 产生主题影响，并让您的访客在视觉上保持参与。

编者注： 这篇文章已经更新，以确保准确性和相关性。
[Originally Published: August 2014 / Revised: November 2021]

• 图片
• 周末wordpress项目