如何正确地将 WordPress 背景图片添加到您的网站？

将 WordPress 背景图片添加到您的网站容易吗？ 除非您的主题不支持它，否则大多数情况下答案是肯定的。

事实上，如今许多 WordPress 主题都提供了一些轻松的方式来添加和更改现有的背景图像。

您还可以使用 CSS 或插件更改 WordPress 背景图像，这会打开选项以在页面、帖子和类别上设置背景图像。

本文将向您展示如何执行上述所有操作，以使您的网站以引人注目的外观和感觉脱颖而出。

什么是WordPress 背景图片？

WordPress 背景图片是应用在主要内容后面的图片。 它们不像英雄形象那样成为您网站的主要焦点，它们通常更加微妙并补充您网页上的其他内容。

除了帮助创建提供更好阅读体验的网页外，WP 背景图像还提供了许多设计可能性，使您的网站在竞争对手中脱颖而出。

与竞争对手不同意味着通过在您的网站设计上付出额外的努力来提高您的品牌知名度，这并不总是那么容易。 在这种情况下，您可以向数字机构寻求专业的网页设计服务。

但是为什么要改变背景呢？ 好吧，默认的可能不会吸引您或与您的品牌不一样。 或者，也许它根本不是图像，只是纯色。 或者，也许您一开始就喜欢现有的，但现在已经厌倦了。

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

使用默认 WordPress 定制器添加WordPress背景图像

WordPress 主题通常提供一种在背景中使用颜色或图像的轻松方式。 大多数人选择更改更符合其网站品牌和品味的背景颜色。

在本指南中，我们将使用 Woostify——电子商务网站的绝佳主题。 根据您的主题，该方法可能会略有不同。

1. 在 WordPress 仪表板中，转到外观 > 墙纸/背景或外观 > 自定义 > 墙纸。

2. 单击选择图像按钮以打开媒体库。

3. 选择您想要的图像。 您可以从您的计算机上载它或从媒体库中选择一个现有的。

4. 满意时单击“选择图像”按钮。
5. 如果您喜欢在预览中看到的内容，请单击“发布”按钮。 就是这样！

此外，WordPress 提供了一个简单的背景图像编辑工具。 你可以用它来试验一下，看看什么尺寸、位置等是最好的。

不用担心被任何东西卡住。 您可以随时轻松返回设置并更改背景（和相关选项）。

使用 Elementor Page Builder 将 WordPress 背景图像添加到帖子/页面

Elementor 是一种流行的页面构建器，可显着加快网站制作速度。 它提供了一个免费插件，您可以使用它来添加 WordPress 背景图像。

1. 首先，您需要安装并激活 Elementor 插件。
2. 首先，转到您选择的帖子或页面。 在默认的 WordPress 页面编辑器上，单击“使用 Elementor 编辑”按钮。

Elementor 编辑器将打开。 在左侧，您会看到一个菜单，其中列出了用于构建和编辑帖子/页面的所有拖放块。

3. 单击页面构建器左下角的小设置图标。

4. 然后，选择样式选项卡。

5. 之后，单击画笔图标以添加WordPress 背景图像。

6. 接下来，单击选择图像按钮以调出媒体库。

7. 选择您想要的图像。 您可以从您的计算机上载它或从媒体库中选择一个现有的。

8. 然后，单击右下角的“插入媒体”按钮。

现在，选定的背景图像应出现在右侧的预览中。 您可能需要调整其他内容以确保图像和文本等项目正确显示。

9. 请记住按“更新”按钮以保存所有更改并更新帖子/页面。

此外，Elementor 为 WordPress 背景图像提供了一些调整，如位置、附件、重复等。随意尝试它们以找出最佳背景。

使用插件添加 WordPress 背景图片

有几个免费但出色的插件可以完成添加WordPress 背景图像的工作。 例如简单的全屏背景图像、高级 WordPress 背景、全背景管理器等。

为整个站点添加WordPress 背景图像

在本指南中，我们将使用简单的全屏背景图像，因为它很简单，因此得名。

该插件为您的网站提供了简单的 WordPress 背景图像安装和设置。 它会使用浏览器自动缩放图像。 因此，无论您的访问者使用什么设备，它总是会填满屏幕。

将其付诸实施只需要几个简单的步骤。 有一个付费版本可以添加额外的功能。 然而，免费的就是我们所需要的。

1. 安装并激活简单屏幕背景图像插件。
2. 在 WordPress 仪表板中，转到外观 > 全屏背景图像。

3. 单击选择图像按钮以打开媒体库。

4. 选择您想要的图像。 您可以从您的计算机上载它或从媒体库中选择一个现有的。

5. 满意时单击“选择图像”按钮。
6. 最后，单击“保存选项”按钮并查看您的网站。 该图像现在应该在网站上显示为全屏 WordPress 背景图像。

请注意，WordPress 背景图像的插件设置会覆盖默认的 WordPress Customizer。 这不是一件坏事，只是要牢记在心。

在特定页面/帖子上添加WordPress 背景图像

在本指南中，我们将使用我们上面提到的高级 WordPress 背景插件。

该插件允许使用 Gutenberg 块添加背景。 您可以将颜色、图像甚至视频设置为 WordPress 背景。 它们都可以在移动设备上查看。 此外，您可以为 WordPress 背景图像和视频添加视差效果。

在这种情况下，我们只会将静态背景图片添加到内容区域，特别是帖子/页面。

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

1. 安装并激活插件。
2. 打开现有的帖子/页面或创建一个新的。
3. 点击左上角的加号按钮。 然后，向下滚动到设计部分，并选择 AWB 块。 顶部图标栏和侧面菜单列将出现在块旁边。

4. 单击侧栏中的图像按钮。 然后单击其下方的选择图像按钮以打开媒体库。

5. 选择所需的图像。 然后，单击选择按钮。 完成后，您应该会看到背景图像。

6. 在顶部图标栏上，单击汉堡形状图标。 然后，选择全宽度选项以覆盖整个宽度。 这完全是可选的。

在侧栏中，您可以更改 WordPress 背景图像的大小、间距、位置等。 随意尝试它。

现在，剩下的就是在块内添加内容。 如果您正在编辑现有的帖子/页面，只需将内容剪切并粘贴到块中即可。

当您对结果感到满意时，请记住保存帖子/页面。

使用CSS添加WordPress 背景图片

现在，我们将探讨如何使用CSS更改 WordPress 背景图像。 这可以使用 WordPress 定制器对整个站点或特定类别进行。

1. 在 WordPress 仪表板中，转到外观 >自定义以访问 WordPress 自定义程序。

2. 向下滚动并单击附加 CSS部分。

3. 将下面的相应代码复制并粘贴到 CSS 字段中：

为整个站点添加WordPress 背景图像

body { background-image: url('imageURL'); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; }

请务必将占位符文本“imageURL”替换为实际的图像文件 URL。 要查看此内容，请在媒体库中选择您想要的图像以查看图像信息。

如果您了解 CSS，请随意调整它。

在特定类别页面上添加WordPress 背景图像

body.category-categoryid { background-image: url('imageURL'); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; }

请务必将占位符文本“imageURL”替换为实际的图像文件 URL，并将“categoryid”替换为正确的类别名称。

要了解类别 ID，请按照以下说明操作：

1. 在 WordPress 仪表板中，转到帖子 > 类别。

2. 将鼠标悬停在要引用的类别的编辑文本上。 您将在页面左下方看到 URL，显示类别 ID。

在 WordPress 中使用背景图像的最佳实践

在 WordPress 上设置自定义背景图像似乎是一件容易的事。 是的！ 在大多数情况下确实如此，但并非总是如此。

因此，我们建议遵循 WordPress 背景图片最佳实践，以尽可能多地消除问题。

在使用 WordPress 主题之前检查背景图像支持

不幸的是，并非所有 WordPress 主题都支持自定义背景图像。 这通常是因为背景与主题的整体设计不匹配。 因此，开发人员选择将其完全关闭。

因此，您应该在下载新主题时检查功能列表，特别是如果您打算购买高级主题。 许多销售主题的网站提供有关 WordPress 主题是否支持背景图像的信息。

坚持使用高质量的图像

您预期的背景图像的分辨率通常会影响或破坏其呈现方式。 您可能会认为用手机拍摄的照片足以作为背景。 但很有可能它需要更高的质量。

您可以从 Shutterstock 等网站购买免版税照片。 这些网站通常有专业级的图像，可以作为大型背景图像上传。 您还可以在免费的图片网站上找到很多。

背景图像可能不会在您的 WordPress 网站上完全可见，因为其中大部分都被内容所覆盖。 但是，它仍然显示在整个屏幕上。 因此，如果您不使用高质量的图像，您可能会看到拉伸背景。

优化背景图片

与上传到 WordPress 网站的所有照片一样，您应该在发布之前优化背景图像。

这对于背景图像尤其重要，因为它们经常出现在您网站的多个页面上。 另外，它们是大照片，占用大量屏幕空间。 此外，较大的图像会给服务器带来很大的压力。 因此，请记住优化您的背景图片，以便您的网站快速加载。

您在这里有两个选择：

• 在将背景图像（以及您的所有网站照片）上传到服务器之前对其进行优化。 您可以借助 Photoshop、GIMP 和 Pixlr 等工具完成此手动过程。
• 通过安装 WordPress 插件来自动优化过程，该插件可在上传时调整大小和缩小图像。

最后的想法

将 WordPress 背景图片添加到您的网站似乎是一件小事。 但如果做得好，它可以产生巨大的影响。

此外，它可以帮助您保持在线状态的新鲜感。 因此，您的访问者不会对一遍又一遍地看到相同的照片感到无聊。

理想情况下，尽可能使用 WordPress 定制器添加背景图像，因为它是专门为按预期工作而设计的。

但是，您还有其他选项来添加和更改 WordPress 背景图像，如上所示。

现在，继续使用您的网站背景进行创意，以直观地吸引访问者。