如何添加、编辑和自定义WordPress主题背景图片

WordPress 背景图片有各种形式。您可以为整个网站上传背景图片，也可以将其放在按钮后面，或者为登录页面设置纯色背景。无论您想把它们放在哪里，了解上传图片（包括背景图片）的基本知识都是至关重要的。

本文将解释什么是背景图片，以及如何编辑背景图片以获得更好的效果。我们还将介绍如何在网站上快速激活背景图片，并解决途中可能出现的任何问题。

什么是 WordPress 背景图片？

WordPress 背景图片是网站的完整背景。它也被称为自定义背景。

WordPress 背景图片示例

背景也可以是纯色。

无论您选择哪种方式，在 WordPress 主题中，functions.php 文件都会处理背景图片。WordPress 的 header.php 文件也会显示背景图片。

因此，主题开发人员可以更好地控制是否为 WordPress 主题激活自定义背景功能。您仍然可以打开或关闭该功能，但您网站的主题通常会决定默认设置。

您可以在 WordPress 上实现多种类型的背景。您可以选择标准的全站背景，也可以选择位于侧边栏和文章等特定元素后面的背景。

也可以为 WordPress 网站上的特定位置定制背景：

• WordPress 页面或文章后面
• WordPress 分类页面
• 页面或文章的内容块内部
• 登录页面
• 导航菜单后面
• 维护或即将发布页面上

总的来说，如果在主题中启用了自定义背景支持，用户就可以上传图片或选择颜色来填充整个网站背景。

设置位于 WordPress 仪表板的外观 > 自定义 > 背景图片下。不过，也可以通过拖放页面生成器、插件和其他不同选项来实现其他类型的背景。

将背景图片上传到仪表板只是整个过程的一部分。之后，你需要配置背景图片设置。有时您可以保持设置原样，而有时则需要重新配置，以确保图片看起来非常出色。

WordPress 背景图片的设置包括

• 背景颜色
• 大小
• 图片位置
• 图片是否重复
• 填充屏幕或拉伸图片的选项

我们将首先介绍使用 WordPress 背景图片的最佳实践。然后，我们将介绍如何在各种情况下设置 WordPress 背景图片。

背景的多种样式

WordPress 背景的真正优势在于它们并非都是静态图像。您可能会遇到各种类型的背景，从视频、照片图案到幻灯片，不一而足。

背景图片示例

您通常可以借助自定义 CSS 或插件（或两者兼而有之）来实现独特的背景。本文将向你展示这两种方法。

以下是一些值得考虑的背景样式：

• 标准背景图片：这是一种静态图像（PNG、JPG 和其他图像格式），可覆盖大部分网站空间，位于主要内容之后。它们的优点包括简洁、可选高分辨率照片以及 WordPress 内核的默认支持。缺点是容易影响前景元素的可见度，而且大尺寸、高分辨率的图片会降低网站速度。
• 纯色背景：当你想为网站增添一些活力，但又没有适合你的品牌或看起来不错的图片作为背景时，纯色背景图片就派上用场了。彩色背景还能呈现出更简洁、更专业的形象，而且实施起来也不费时。无需自定义代码或插件，它们就能很好地匹配你的品牌。
• 渐变背景：渐变背景会从一种颜色过渡到另一种颜色。它比纯色更有视觉吸引力，添加起来也不费时间，而且你可以用很多插件来添加。主要缺点是，前景可能在渐变的一端显示得很好，但在另一端却显示不出来。
• 图案或纹理背景：所有图案和纹理背景都是照片，但它们的重点是图像中的重复项目或特写纹理，如一块木板或一片草地。图案或纹理的好处在于，它作为背景的效果非常好，因为你可以将其拉伸，而且大多数人都不会注意到，当图片不够大时，图案会出现断裂。
• 图片幻灯片背景：图片幻灯片背景使网站所有者能够在背景中分享多种类型的设计或照片，从而在客户滚动浏览网站时调整情绪。不过，幻灯片可能会分散注意力或降低网站速度。
• 视频背景：视频背景引人入胜，观看起来很有趣，而且很容易描绘出您的品牌性质。但是，如果操作不当，它们也会导致性能问题，并可能夺走销售漏斗的注意力。此外，背景视频的尺寸和播放时间必须恰到好处。除非您选择免费的视频素材，否则背景视频的制作成本也会很高。

使用 WordPress 背景图片的最佳实践

设置自定义背景图片似乎很容易。只需将图片上传到正确的位置，然后看着它出现在前端，对吗？

大多数情况下是这样，但有时你会发现背景图片可能有点麻烦。因此，我们建议您遵循 WordPress 背景图片的最佳实践，尽可能消除问题。

坚持使用高质量图片

背景图片的分辨率往往会影响图片的呈现效果。您可能认为您用智能手机拍摄的图片非常适合作为背景图片，但实际上它可能需要更高的质量。

Unsplash 上的免费图片库

您可以从 Shutterstock 等网站付费购买免版税图片。这些网站通常都有专业级的图片，这些图片都经过预处理，可以作为大型背景图片上传。你也可以在免费图片库网站上找到很多这样的图片。

背景图片可能不会完整地显示在网站上，因为大部分都被内容覆盖了。不过，实际图片还是会显示在整个屏幕上。

如果不使用高质量的图片，就有可能出现背景拉伸的情况。

确保背景图片大小合适

除了图像分辨率，图像的物理尺寸也很重要。

所有屏幕的长宽比都各不相同。而移动设备让情况变得更加复杂。但我们的目标是在最大的屏幕上使用看起来很棒的图片。否则，就有可能再次出现图片被拉长或无法正常显示的情况。

一般来说，WordPress 背景图片的最小尺寸为 1024 x 768 像素，这是个不错的原则。不过，也有专家建议使用 1920 x 1080 像素这样的尺寸。总的来说，您最好将宽度保持在 1000 到 3000 像素之间，具体取决于显示的位置。

WordPress 背景图片尺寸

下一个需要考虑的因素是宽高比。背景图片是覆盖整个网站，还是只覆盖顶部的四分之一？

从技术上讲，网站的纵横比是纵向的（高度长于宽度）。因此你可以考虑这类图片。但是，部分背景（如标题或横幅广告的背景）应保持横向格式（宽度长于高度）。

此外，目前台式机最常见的宽高比是 16:9。保持这一目标有助于实现。响应式主题或插件可自动调整背景图片，以适应移动浏览。

最终，在实际网站和多种设备类型上测试背景图片会让最终决定变得更容易。

制作 WordPress 背景图片前进行优化

与上传到 WordPress 的所有图片一样，如果您不在发布到互联网之前对其进行优化，那将是对自己的一种伤害。这一点对于背景图片尤为重要，因为它们通常会出现在整个网站的多个页面上。此外，它们都是大尺寸照片，在屏幕上占据了相当大的空间。

较大的图片会对服务器造成很大的压力。请保持图片的分辨率，但优化图片大小，以便网站快速加载。

优化图片有两种选择：

• 在上传到 WordPress 之前优化背景图片（以及所有网站图片）。借助 Photoshop Express、GIMP 和 Pixlr 等工具完成这一手动过程。
• 安装 WordPress 插件，在上传照片时调整大小并缩小尺寸，从而自动完成优化过程。

阅读我们的深入图片优化指南，了解如何优化图片以提高网页性能。

安装主题前检查背景是否支持

遗憾的是，并非所有主题都支持自定义背景图片。这通常是因为背景不符合主题的整体设计，所以开发者选择将其完全关闭。

不过，如果你真的想要在网站上添加背景，那么在下载新主题时，尤其是打算付费购买高级主题时，最好查看一下功能列表。许多主题销售网站都会提供主题是否支持背景的信息。

例如，WordPress 主题库中列出的主题会将支持自定义背景作为标签。您也可以在主题描述中找到有关自定义背景的参考信息。

主题的自定义背景支持

其他主题网站通常会包含类似的自定义背景图片信息。如果没有，请联系开发人员，了解是否有可能以任何方式实现，以及覆盖背景图片块（如下文所述）是否会导致主题出现任何问题。

考虑使用可视化页面生成器，让背景图片变得更简单

Gutenberg、WPBakery、Divi 和 Elementor 等页面生成器提供了一系列令人印象深刻的区块和模块，可以在网页的任何位置插入图片和文本框等元素。

Elementor website builder

如果没有拖放生成器，配置背景图片就会变得比较困难。要解决可能遇到的任何问题尤其困难。

页面生成器还往往会取代 WordPress 提供的默认背景图片功能。你可以在代码中覆盖主题限制或任何有助于显示背景图片的缺失元素。

确保背景图片合法

谈到图片，尤其是在互联网上发布的图片，总会涉及到合法性问题。在社交媒体上有一种日益增长的趋势，人们似乎认为在照片上添加信用就可以自动使用该照片。

这是错误的。

照片的所有权归谁所有？即使该照片来自 iPhone 的快速抓拍，在美国和许多其他国家，他们也立即拥有该照片的版权保护。

如果你想获得使用他人照片的合法权利，需要版权持有者出具书面声明，允许你使用他们的图片–一封简单的电子邮件就可以。即便如此，如果对方要求你注明照片的出处，你也必须注明。

我们有一份关于保护网站图片的综合指南，但这篇文章也为那些有兴趣使用其他来源照片的人概述了有价值的信息。

背景图片的难处在于，由于 WordPress 无法为背景图片添加可见的标题，因此通常无法添加属性。而且，你也不能随便在一篇博文或一个页面上添加署名，并指望以此作为整个网站背景图片的署名。

为了保护自己，也为了尊重照片的拍摄者，在获取 WordPress 背景图片时，请考虑以下方法之一：

• 自己拍摄照片。这是确保不侵犯他人版权财产的最简单方法。
• 在 Shutterstock 和 iStockPhoto 等网站上付费购买照片。这些网站有时价格不菲，但对于一张背景图片来说，可能刚好能挤进你的预算。
• 可以考虑 Unsplash 或 Pexels 等免费图片网站。不过，请确保不需要注明出处！您偶尔可以在这些网站上找到建议但不要求署名的图片。
• 联系摄影师或艺术家，询问是否可以免费使用。这可能就是你所需要的，特别是如果你能提供一些回报的话。
• 考虑跳过背景图片，或考虑用彩色背景代替照片。

如何在 WordPress 中设置背景图片？

在 WordPress 中设置背景图片有多种方法。这些方法通常会根据您想要放置图片的位置而改变。

例如，您可能希望整个网站的背景图片保持一致。另一方面，您也可能希望在所有页面上都显示独特的背景图片。

由于存在如此多的可能性，我们将在以下部分介绍如何添加背景图片或颜色：

• 整个网站
• 一个 WordPress 页面
• 一个 WordPress 文章
• 单个内容块
• WordPress页眉
• 分类存档页面
• WordPress 登录页面
• 导航菜单
• 维护页面

开始之前：激活 WordPress 上的自定义背景支持（如需要）

主题开发者决定着网站后台功能的命运。WordPress 的内核中内置了这一功能，但主题开发者可能会将其关闭，从而使你无法在仪表板设置中将其打开。

如果在下面的教程中，你发现你的主题是导致你缺少自定义背景选项的原因，请考虑以下步骤来快速解决这个问题。

WordPress 的主要自定义背景支持由 functions.php 文件处理。如果缺少该文件，请打开并插入以下代码：

$defaults = array(
'default-color'          => '',
'default-image'          => '',
'default-repeat'         => '',
'default-position-x'     => '',
'default-attachment'     => '',
'wp-head-callback'       => '_custom_background_cb',
'admin-head-callback'    => '',
'admin-preview-callback' => ''
);
add_theme_support( 'custom-background', $defaults );

请记住，真正激活背景支持的元素是 add_theme_support() 函数及其中的所有内容。这段代码可以在 WordPress 仪表盘中打开背景功能，你可以在本文的后续教程中使用它。

还可以通过 functions.php 文件为整个主题添加默认背景图片。只需转到前面代码中带有 default-image 值的区域，然后在 => 后 '' 之间的空白处添加图片的 URL。

这是在 WordPress 仪表板上打开自定义背景的快速而简单的方法。

尽管如此，如果主题本来就不支持背景，我们还是建议更换主题。取消自定义背景功能可能有其自身的目的，也可能是主题开发人员发现它给设计带来了太多问题。

如何为整个 WordPress 网站添加背景图片

如果您的主题提供添加自定义背景图片的功能（许多主题都提供这种功能），您就可以更轻松地添加背景图片了。

首先，进入 WordPress 面板，点击外观 > 自定义。

点击外观菜单下的“自定义”链接

这将带你进入 WordPress 主题定制器，左边是定制设置，右边是网站预览。

在这里，找到并点击“背景”选项卡。

编辑器中的 WordPress 背景图片

如果您可以选择外观 > 背景，则可以更直接地使用该设置。

点击外观菜单下的“背景”链接

背景自定义区域管理整个网站的背景元素。

单击“选择图片”按钮继续。

点击‘Select Image’按钮

在“Select Image”窗口中，选择一张适合作为品牌和网站风格背景的图片。一般来说，黑色、白色或灰色的中性色彩模式通常有助于确保大部分文字和内容在背景的衬托下依然美观。

选择图片后，点击 Choose Image 按钮继续。

选择背景图片

您选择的背景现在会出现在网站预览中。

看看所选图片是否仍能突出您的内容，并使其看起来更美观。有时，你可能会发现需要完全更换背景或更改文本或链接颜色等。

背景的小缩略图也会显示在 Settings 面板中，告诉你图片已被应用。

WordPress 背景图片缩略图

WordPress 背景图片还有一些其他设置，包括 Preset 字段。

点击 Preset 字段可使用预设设计和对齐方式更改图像格式。

WordPress 背景图片的“预设”选项

您可以从以下预设中进行选择：

• Default：这通常与 Repeat 相同，但可能取决于您的主题。默认设置通常效果最好，但也取决于所使用的图片。
• Fill Screen：此设置会拉伸图像，以确保覆盖屏幕的所有部分，即使这意味着要裁剪图像，使其溢出屏幕。它对许多高分辨率图像效果很好，但对低分辨率图像可能会造成模糊。
  Fit to Screen：它保持原始照片的纵横比，并尝试使用该比例来适应当前屏幕图像。它能很好地保持图像接近原始状态，但可能无法覆盖所有背景区域。
• Repeat：此功能使用了部分 Fill Screen 功能，可扩展和拉伸图像，但也会在无法成功覆盖整个屏幕时重复图像。对于图案来说，这通常看起来很不错。但对于某些图像，它可能会在重复图像之间产生一条硬线。
• Custom：这种设置可以让你对背景进行最大程度的控制，提供多个选项来自定义 WordPress 背景图片的大小，比如它在页面上的重复方式、拉伸方式或用户滚动时的移动方式。

由于图片的尺寸、分辨率和细节各不相同，因此没有规定哪种预设效果最好。因此，你最好从 Default 预设开始，然后测试其他预设，看看哪个最适合你的背景图片。

如果其他方法都不奏效，可以使用 Custom 设置来进行更具体的选择。

用于 WordPress 背景图片的 Fill Screen 预设

Fit to Screen 预设并不能完全满足这张图片的要求，主要是因为原始图片的长度远大于宽度，在右侧留下了大量空间。我可以将 Image Position 改为 Center，但这样很可能会在两侧留下空白。

Fit to Screen 预设

下一个需要考虑的设置是 Image Position 工具。点击箭头可移动背景图片，调整方向，使图像焦点朝向中心或填满屏幕。

与 Presets 设置一样， Image Position 工具也需要一个猜测和检查的过程，因为原始图像及其内容决定了它的外观。

WordPress 背景图片位置

接下来，有一个复选框可让背景图片 Scroll with Page。

选中该复选框后，背景图片会紧贴前景内容，并随着用户在页面上的上下移动而滚动。

启用“随页面滚动”选项

取消选中该复选框往往会改变背景图片的总体方向，但其主要功能是在用户向下滚动页面时让背景保持静态。

前景内容项目（如本例中的产品）会在背景图片上滑动，从而产生吸引人的效果。

禁用 Scroll with Page 选项

使用自定义预设

除自定义预设外，选择其他预设时，没有太多额外的设置可配置。

不过，选择 “自定义预设 ”可以打开其他几个字段供您考虑。

例如，你可以选择 Fill the Screen 或  Fit to Screen，然后将其与重复或不重复的背景图片相结合，将预设中的元素结合起来。此外，你还可以使用 Scroll With Page 选项。

背景图像的预设和图像大小

看看是否可以使用未经任何编辑或设置的原始图像。有时，原始照片几乎完全符合用作背景的要求，那么为什么要破坏已经准备好的东西呢？

不过，对于你的网站来说，它的尺寸也可能过大，或者长宽比不是很合适。无论如何，我们都建议你尝试一下这个设置，看看是否适合你。

设置背景图片大小

一旦决定了完美的背景设置（在本教程中，默认选项看起来不错），点击 Publish 按钮即可在网站上显示更改。

点击发布按钮

进入网站前端查看背景效果。

主页是一个很好的起点。你会发现页眉区域和欢迎图像没有背景。这是因为网站顶部的欢迎图像已经作为全屏英雄图像覆盖了整个屏幕的水平部分。

至于页眉和菜单，你将在下面的教程中学到如何配置这些背景。

查看 WordPress 背景图片

请记住，一般的自定义 WordPress 背景会在网站的每个页面和文章上激活。这是一个全局功能，适合那些想快速打造网站品牌并增加一些亮点的人。

例如，进入本网站的 Shop 页面，就会看到产品选择后面的背景。

另一个页面上的 WordPress 背景图片

如何为整个网站设置背景色而不是图片

在整个网站上激活背景色的过程与打开背景图片没有太大区别。首先进入仪表板中的外观 > 背景，然后查找背景颜色字段。

单击“选择颜色”按钮，打开更多设置，选择和切换不同的背景颜色。

选择纯色作为背景

颜色面板提供多个选项供你决定颜色。首先是输入或粘贴颜色代码。所有颜色都有独特的颜色代码，你可以在互联网上快速搜索到这些颜色及其相关代码。

另一种方法是点击颜色面板，为背景找到最合适的颜色。如果你想选择一种简单的颜色，面板底部甚至还有常用的色块。

要激活背景颜色，请确保该颜色已被选中并显示在 Select Color 预览中。

选择背景颜色

您应该能在 WordPress 自定义预览中看到背景颜色。如果没有，这很可能意味着你安装的图片背景覆盖了彩色背景。

要显示彩色背景，只需点击背景图片预览下方的移除按钮。

删除 WordPress 背景图片

现在，颜色会出现在整个网站的内容后面。就像使用图像背景一样，请仔细查看网站，确保所有文本、图像和链接在新背景下仍然可见。

预览纯橙色 WordPress 背景

如何为 WordPress 页面添加背景图片

但是，如果您想在 WordPress 上插入一张图片，作为单个 WordPress 页面的背景，该怎么办呢？上一节概述了全站背景图片的全局设置。

很多人都喜欢在页面上添加背景，因为这样可以为页面融入与内容相关的特定主题或感觉。例如，如果公司位于洛杉矶，那么“关于我们”页面就可以使用洛杉矶背景。或者，作者的新书介绍可以使用符合故事主题的背景。

在本节中，我们将介绍如何使用一种主要方法和几种替代方法为页面添加 WordPress 背景图片，如果你不介意花钱购买插件或选择页面生成器的话。

注：使用古腾堡编辑器还是经典 WordPress 编辑器并不重要。

对于特定页面背景，这些方法似乎最有效：

• 使用自定义 CSS 添加独特的页面背景。
• 使用允许单独页面背景的插件。
• 借助页面生成器在每个页面上添加自定义背景。

为页面添加自定义 CSS 需要在 WordPress 页面设置的自定义 CSS 模块中找到该页面的类 ID 并调用背景 URL。幸运的是，要找出一个页面的类 ID 并不难，我们可以查找它，或者你可能已经知道它是什么了。

访问网站上的页面，只为该页面添加背景。

添加特定页面的 WordPress 背景图片

右键单击页面上的任意位置，屏幕上会出现一个下拉菜单。选择下拉菜单底部的检查工具。

检查模块会显示页面本身的编码，以及网站全局使用的自定义 CSS。这是查找网站页面或文章信息的有用区域。

检查网页

检查框中有网页的代码行，但我们只对分配给这个网页的类标签感兴趣。说明一下，WordPress 的每个页面都有一个 class 标签作为识别码。

使用搜索功能，输入 body 或 class，即可找到带有 page-id 标签的代码行。

在本例中，ID 是 page-id-352，但你的页面会有所不同。

你要复制带有 page-id-# 关键字的整段代码，包括破折号。

在 WordPress 中查找页面 ID

将页面 ID 保存在某个地方，以便在接下来的几个步骤中使用，然后返回 WordPress 面板，点击外观 > 自定义。

进入主题定制器

在 WordPress 定制器中选择“额外 CSS”选项卡。

自定义器中的“额外 CSS”部分

该部分允许你输入或粘贴任何自定义 CSS，以便在整个网站中对项目进行操作。在本例中，它可以方便地覆盖默认背景图片，并为一个页面启用背景图片，而不是其他页面。

将以下代码粘贴到“额外 CSS”字段中，但切记要将“#”替换为从前面步骤中提取的作为页面 ID 的实际数字。此外，你还必须输入一个真正的图片 URL，以代替我们在这里输入的填充文本 ( http://YOURIMAGEURL.jpeg )。

body.page-id-# { 
background-image: url("http://YOURIMAGEURL.jpeg"); 
background-position: center center; 
background-size: cover; 
background-repeat: no-repeat; 
background-attachment: fixed;
}

在此示例中，页面 ID 填为 352，我们从媒体库中粘贴了背景图片 URL。

如有必要，如果您在安装屏幕背景图片时遇到困难，请更改自定义背景设置。例如，您可能需要修改 WordPress 背景图片大小、附件或位置等元素。如果不需要，请保持示例代码中的原样。

为 WordPress 网站添加自定义 CSS

对自定义 CSS 满意后，点击 Publish 按钮。

点击发布按钮

有了自定义 CSS，页面就可以使用代码的大小和定位设置指定背景图片。除非为不同的页面 ID 重复设置 CSS，否则网站上的其他页面都不会显示相同的背景。

背景图片现在显示在页面上

如前所述，为 WordPress 页面添加独特背景的其他方法包括使用页面生成器或允许在单个页面上添加背景图片的插件。

不过，在单个页面上放置背景图片的最便宜、最快捷的方法是使用上图所示的 CSS 代码方法。

如何为 WordPress 文章添加背景图片

大多数背景图片都会插入 WordPress 页面或整个网站的每个页面。
WordPress 的默认自定义背景功能与单个文章无关，只是在博客文章中也会显示该背景。这对于所有组织来说并不理想，因为不同的博客文章可能有截然不同的主题。

这样的博客可以从自己独特的背景图片中受益。但是，WordPress 文章没有自己的背景图片设置，这就有点麻烦。

因此，在为文章添加背景图片时，我们有几种方法可以考虑（你会发现它们与处理特定页面背景图片时的方法相同）：

• 使用自定义 CSS 插入背景图片。
• 使用插件为单个文章添加背景。
• 为文章背景安装可视化页面生成器。

与上一节关于独特页面背景的内容一样，你也可以使用页面生成器或插件添加文章专用背景。

鉴于制作文章专用背景与制作页面专用背景并无太大区别，我们将只简要介绍处理单个文章背景的步骤。

使用自定义 CSS 实现特定文章背景时，使用的代码与页面背景相同，但有一点不同：必须找到文章 ID，而不是页面 ID。

因此，打开要插入背景的 WordPress 文章的前端。

WordPress 文章背景图像

右键单击文章，选择“检查”选项。在代码中完成搜索，找到代码中的 body class 部分。查找  postid-#  部分–这是你需要插入到自定义 CSS 中的文章 ID。

你会注意到，在这个例子中，文章 ID 的格式与页面 ID 的格式略有不同，postid-# 标记中的“post”和“id”之间没有破折号，而 page-id-# 标记中则有破折号。此外，这些并不是硬性规定。你可以找到不同格式的标签。

现在，进入 WordPress 面板，点击外观 > 自定义。导航至“额外 CSS”选项卡。

转到“额外 CSS”部分

将以下代码粘贴到自定义 CSS 字段中：

body.postid-# { 
background-image: url("http://YOURIMAGEURL.jpeg"); 
background-position: center center; 
background-size: cover; 
background-repeat: no-repeat; 
background-attachment: fixed;
}

然后，输入之前从所需文章中找到的文章 ID 编号。用数字替换 CSS 代码中的“#”。此外，将 http://YOURIMAGEURL.jpeg 文本改为您希望显示的背景图片的真实 URL，并保留引号。

为特定文章 ID 添加自定义 CSS

确保在离开“额外 CSS”选项卡前点击“发布”按钮，因为这将在网站上保存您的更改，并允许您在前端查看背景。

点击“发布”按钮保存更改

完成 CSS 更改后，您就可以回到 WordPress 博客文章的前台查看新背景了。测试网站上的其他博文和页面，看看其他博文和页面是否也有背景，除非你为这些博文 ID 执行了相同的代码。

查看博文的背景图片

如何为独立内容区块添加背景图片

WordPress Gutenberg 区块编辑器的独立内容块允许多种内容显示选项，包括文本框、图片和图库。

它们将内容分割成不同的部分。因此，您可以为该区块添加背景颜色或图片。

例如，假设您正在撰写一篇关于服装零售业现状的博文。您想在文章的结尾或开头呼吁人们报名参加下一次网络研讨会。通过使用背景颜色或图片来突出这一部分是很合理的。

遗憾的是，WordPress 的区块编辑器并没有提供可以为任何区块添加背景的全面设置。不过，有些区块可以选择加入彩色背景。

还有一种称为 “封面”（Cover）的区块，是最接近为文章或页面中的一个区块添加背景图片的区块。封面允许你叠加文本和一些媒体项目，因此适合我们的最终目标。

以下是为单个 WordPress 区块设置图片或彩色背景的技巧。

为一个区块设置彩色背景

为单个区块增添活力的最简单方法就是添加彩色背景。它不像图片背景那样花哨，但彩色背景实际上是 WordPress 区块编辑器中唯一一种可用于标准区块的背景类型。

注意：有些区块根本没有任何背景设置。如果是这种情况，你最好使用封面区块，并在其上叠加其他区块，本文将进一步介绍。

例如，段落区块就有激活彩色背景的设置。

要打开该设置，请选择该图块，然后找到右侧 “区块” 选项卡下的 “颜色设置“。

更改背景颜色设置

本节显示文本颜色和背景颜色字段。

转到背景颜色区域，从可用选项列表中选择一种颜色。你也可以选择自定义颜色链接，插入自己的颜色代码或选择一种独特的颜色。

如你所见，一旦设置到位，段落块的背景就会变成不同的颜色–本例中是蓝色。

选择背景颜色

为任何 WordPress 区块添加彩色背景

如前所述，并非所有WordPress区块都有这种内置背景功能。如果您想制作一个不提供背景选项的图库或其他区块元素，该怎么办呢？

最快捷的办法就是使用 WordPress 中的组区块功能。

为此，请选择内容中已有的多个区块。在本例中，我将同时选择一个段落区块和一个图库区块。

在出现的菜单上点击堆叠的方形图标。

页面上的 “我们的团队” 部分

在下拉菜单中选择 Group 选项。

这会将你当前选中的任何区块合并为一个组，让你可以一起移动或编辑它们，而不是单独的区块。

将各部分归为一个区块

这将把组设置为自己的区块。这意味着你可以到页面右侧的 “区块设置” 选项卡中找到它的设置。

找到 “颜色设置” 选项卡并点击。

更改分组块的颜色设置

与标准段落块一样，分组区块也有背景颜色功能。

在这种情况下，选择你最喜欢的颜色，就可以看到该组中的所有内容现在都有了这种背景颜色。

群组块的最大优点是，它可以使用另一个没有背景功能的块（如图库区块），并允许你为其激活背景。

将背景颜色设置为蓝色

为 WordPress 区块添加图片背景

WordPress 块既可以在页面中使用，也可以在文章中使用。因此，我们可以在任何一种情况下实施这一策略。您可以在分组块的背景上方插入任何内容，也可以只在一个 WordPress 块中插入。

要开始这个过程，请点击添加区块或 “+“图标按钮，然后搜索封面区块。

选择该区块，将其插入到您的文章或页面中。

添加封面图片区块

然后，您必须点击 “上传” 或 “选择媒体” 按钮，这样就可以搜索可用作背景的图片。

点击 “选择媒体” 按钮

选择你想要的图片，然后点击 “选择” 按钮。

选择图片并点击 “选择” 按钮

现在你可以看到该图片作为封面区块的背景。

点击该图块即可开始输入段落内容，因为它的主要功能是覆盖文本。

封面区块的好处在于它提供了多种格式选项，让你可以在几秒钟内从标题跳转到段落格式。

区块的 WordPress 背景图片

要在背景上添加其他区块，请单击封面区块内的 “+”图标按钮。您可能需要按一次回车键才能显示该按钮。

点击区块部分的加号

与在普通文章中添加内容块一样，封面块允许您滚动浏览 WordPress 中所有潜在的内容块。

这意味着您可以在封面区块中放置图片、图库、列或任何类型的 WordPress 区块，使其成为使用单独区块制作图片背景的理想解决方案。

搜索区块

在本例中，我插入了一张图片，并对其进行了一些格式化处理，使其在封面区块中看起来可以接受。

在右侧的 “区块” 选项卡中，放在背景前的每个区块都有自己的自定义设置，因此在将它们放入封面区块时，请考虑对它们进行编辑。

带有 WordPress 背景图片的图片区块示例

在某些情况下，你可能想编辑或自定义背景图片本身。如果是这样，请选择封面区块，然后转到页面右侧的 “区块设置” 选项卡。

这将显示背景图片的各种调整设置，包括以下设置：

• 固定背景
• 重复背景
• 焦点选择器
• 尺寸
• 叠加
• 不透明度
• 高级

更改区块设置

其中一个需要考虑的重要设置位于 “区块设置” 面板的底部。

向下滚动可找到叠加部分。打开该部分可以看到颜色叠加列表，以及将这些颜色设为纯色或渐变色的选项。

这是一个很好的选项，可以稍微改变背景颜色，以匹配你的品牌或突出前景内容。你还可以调整不透明度，确保叠加颜色不会完全淹没背景。

更改区块的背景颜色

作为替代方案，可以考虑使用 Stackable Page Builder Gutenberg Blocks 插件，为单个区块的背景打开更高级的工具。

如何在 WordPress 页眉后面放置背景图片

到目前为止，我们已经讨论了如何为整个 WordPress 网站添加背景图片，以及在 WordPress 块、文章和页面等特定区域添加背景的方法。但包含菜单和徽标的区域呢？

有时，您只需要在页眉后添加背景即可。

为页眉设置背景图片可以为网站增添新的活力，尤其是在有节日或大促销的时候。

首先，进入 WordPress 仪表板中的外观 > 页眉。

注：您也可以在外观 > 自定义 > 页眉部分找到页眉设置。

WordPress 控制面板 > 外观 > 页眉

现在你应该会在屏幕右侧看到主页预览，以及左侧的页眉设置。

页眉模块说明了任何页眉背景图片的首选尺寸，所以你可以选择在上传前裁剪图片，或者等到在 WordPress 仪表板上获得图片后再上传。

在当前页眉标题下，点击添加新图片按钮。

点击 “添加新图片” 按钮

标题很棘手，因为你要确保所有链接和文本元素（更不用说你的徽标了）在背景图片上看起来非常清晰。

因此，我们建议试用背景图片，并考虑使用纯色和图案较多的图片。它们不会让你很难看到菜单项和徽标。

选择一张看起来比较理想的图片，然后单击 “选择并裁剪” 按钮继续。

选择图片

我们喜欢内置的裁剪工具，因为它会自动为标题背景图片提供正确的尺寸。与事先在 Photoshop 等软件中编辑照片相比，这可以加快整个过程。

将裁剪框移动到最适合背景图片的位置。如果需要进一步缩小图片，可以随意拖动其中一个角。

裁剪完美后，点击 “裁剪图像” 按钮。

裁剪图片

在 WordPress 定制器预览中，页眉背景图片会立即激活，帮助您清楚地看到客户会看到什么样的背景。

您会发现，页眉背景图片不会渗入页面内容的其他部分。相反，它会保留在页眉中，位于徽标、标语、菜单和搜索栏等当前位置的任何内容之后。

选择页眉背景图片

标题背景的另一种选择是上传多张图片并让它们随机旋转，这样每当用户登陆网站主页时，就能为网站增添一些亮点和惊喜。

要做到这一点，首先必须在 “页眉 “设置框中上传几张图片。单击 “添加新图片” 按钮完成该过程。

有了多张图片后，点击随机上传页眉按钮，激活每次显示不同页眉背景的功能。

添加更多页眉

您可能会发现，在页眉中添加背景图片会使您难以看到某些页眉项目，如菜单或购物车。

如果是这种情况，我们建议不要立即删除页眉图片。而是转到文本颜色和链接颜色字段，看看任何调整是否会有帮助。

文字颜色设置可控制标题中任何未超链接到其他内部或外部页面的文字。很多时候，这只意味着标语（如果有的话），但有时也可能有其他项目，如购物车总数或社交媒体图标，它们也会随文字改变颜色。

另一个方框是链接颜色。当你调整这个颜色时，很可能会看到更多的变化，因为它包括所有链接到其他页面的菜单项。

WordPress 背景图片上的文字颜色

下面是一个例子，说明当你为文本颜色和链接颜色都选择一种新颜色时会发生什么。你可以看到，标语和网站名称变了，菜单变成了白色，购物车图标等大多数其他页眉元素也变了。

检查页眉元素

如果对标题使用背景图片不感兴趣，也可以选择使用纯色背景。

为此，请在 “页眉设置” 区域下找到 “背景颜色” 字段。

单击 “选择颜色” 按钮，从颜色面板中进行选择，即可看到预览结果。使用背景色时，还可以更改文本颜色。

设置背景颜色

测试最适合你的页眉的颜色，并为页眉确定完美的背景图片后，点击 “发布” 按钮，让所有人都能看到更改。

如果您在前端显示更改时遇到任何问题，请考虑清除 WordPress 缓存。

点击 “发布” 按钮

如何为 WordPress 分类添加背景图片

WordPress 分类存档页面汇集了某个分类下列出的所有文章。例如，许多网站都有产品等自定义文章类型的分类。默认情况下，所有 WordPress 网站都有文章类别。那些未分类的文章会被标记为 “未分类” 类别。

由于分类归档页面汇集了类似的内容，因此在这些页面上包含一张相关的背景图片以更好地展示分类是很有意义的。例如，你可以为网页设计类别设置一个技术导向的背景，或者为旅游类别设置一个贝壳或海滩图案的背景。

自定义 CSS 方法（概述如下）是最便宜的选择。不过，你也可以研究一下各种页面构建工具和插件，看看哪些它们允许在分类页面上设置背景。

要使用 CSS 完成这项任务，请打开 WordPress 仪表板，进入外观 > 自定义。

选择 “额外 CSS” 选项卡，打开允许输入自己的 CSS 的模块。

转到 “额外 CSS” 部分

打开 WordPress 网站上的一个分类档案页面。通常，这些页面的 URL 如下： http://yourwebsitedomain.com/category/travel。您需要将 “travel” 部分更改为您自己网站上的任何类别，并将 yourwebsitedoman 部分更改为您的实际域名。

右键单击类别页面上的任意位置，然后单击 “检查”。这将在浏览器中显示检查工具，并显示该页面的代码供你查看。

右键点击网页，选择检查

搜索 “body” 或 “class”，找到分类页面的 CSS 类，尤其是该分类的 CSS 类。

在这种情况下，我们的 CSS 类是 “category-travel”，因为我在网站上有一个名为 “Travel” 的类别。

保存 CSS 标签备用。

记下列出的类别

然后，返回到 WordPress 定制器中的 “额外 CSS” 部分。

将以下代码粘贴到该框中，将 category-travel 类换成你自己的类，并在写有 http://YOURIMAGEURL.jpeg 的地方放置一个真实的图片 URL。

body.category-travel {
background-image: url("http://YOURIMAGEURL.jpeg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

为 WordPress 背景图片添加自定义编码

单击 “发布” 按钮保存更改。

添加 “自定义 CSS” 代码

最后，回到 WordPress 网站前端的分类归档页面。现在显示的页面应该与之前相同，但背景已在 CSS 代码中指定。如果在 WordPress 背景图片格式化方面遇到任何问题，请切换回额外 CSS 面板，调整背景的位置、大小和重复功能等元素。

进入分类页面查看背景

如何为 WordPress 登录页面添加背景图片

WordPress 登录页面有两个版本：一个版本用于访问网站并希望注册和登录网站的普通用户，另一个版本用于内部用户，如管理员和作者。

这些登录页面与网站的主要工作分开（大部分文件位于 wp-login.php 文件中）。因此，自定义背景图片工具不会渗入登录模块。

有多种 WordPress 登录页面自定义插件可供选择。在这里，我们将向你展示如何使用 LoginPress 更改 WordPress 的默认背景。

LoginPress 网站

它可以让您直接从 WordPress 管理仪表板更改登录页面上的每个元素，而无需编写任何代码。

要使用 LoginPress 更改 WordPress 的默认登录背景，请先在网站上安装并激活它。

完成后，进入 WordPress 管理仪表板的左侧边栏，导航到 LoginPress。插件的主要功能位于 “设置”、”自定义” 和 “附加组件” 部分。

选择自定义选项

只需选择自定义选项。

在下一个屏幕上，你可以看到左侧的所有自定义内容和右侧的实时预览，在这里你可以并排跟踪你所做的更改，包括

• 主题
• Logo
• 背景
• 自定义登录表单
• 自定义忘记密码表单
• 更多…

LoginPress 自定义界面

接下来，你将进入背景自定义界面，在这里你可以看到 3 个背景选项，包括：

• 背景颜色
• 背景图片
• 背景视频

不同的背景选项

背景颜色

如果您希望使用背景色，请先禁用背景图片。然后点击 “颜色选择器” 工具。它会显示一个颜色面板，让你准确选择适合你业务的颜色。

最棒的是，你还可以在 WordPress 自定义预览中并排跟踪更改。

背景颜色选项

背景图片

引人注目的背景为 WordPress 登录页面奠定了正确的美学基调。LoginPress 可让您在登录页面动态展示您的品牌形象。

LoginPress 的背景图片功能提供两种选择，可为登录页面添加引人入胜的背景，包括

• 背景图库：背景图库提供一些内置背景图片。
• 背景图片：背景图片选项可让你从电脑中选择任何想要的图片。

背景图片选项

除此以外，你还可以进行其他设置，以确保上传的图片当前处于最佳浏览状态，例如：

• Background Image Repeat：此功能可帮助你重复背景图片，例如 x-repeat, y-repeat, 和 inherit 等。
• Select Position：该选项可让您自定义所选背景图片的位置。
• Background Image Size：您还可以调整背景图片的大小，如 Auto, Cover, Contain 等。

您可以根据照片的大小，使用这些选项进行调整。

图片大小选项

背景视频

您还可以使用 LoginPress 在 WordPress 的默认登录页面中添加背景视频。为此，只需启用背景视频选项即可。

现在，你可以看到又多了 2 个选项，包括：

• Media
• YouTube

背景视频选项

如果要选择任何自定义视频，请单击 “选择视频” 选项 > 上传文件 > 选择文件 > 并选择文件。全部完成！

选择自定义视频

如果要选择任何 YouTube 视频，只需选择 YouTube option > 添加 YouTube 视频的 ID。

YouTube 选项

请记住，无论您选择颜色、图片还是视频作为 WordPress 登录页面的默认背景，都不要忘记单击 “发布” 按钮，让受众看到实时更改。

点击发布按钮

除了自定义 WordPress 默认背景图片的整体外观外，您还可以对 WordPress 默认登录页面的一般行为进行更改，例如：

• 强制重置密码
• 会话过期
• 自动记住我
• 自定义密码字段
• 登录顺序
• 启用 PCI 合规性

LoginPress 设置页面

使用 LoginPress 为您的网站制作 WordPress 背景图片，可为默认的 WordPress 登录页面带来视觉上的吸引力和个性化的触感。它为您提供了创建用户友好型登录界面的机会。

如何为导航菜单添加背景图片

你可能注意到有些网站的菜单很花哨，包括背景图片或图标。这种做法在电子商务领域很常见，品牌可能会有一个超大型菜单，上面有类别和每个类别按钮的背景图片。

如果您有兴趣在菜单中添加背景，请查看我们关于最佳 WordPress 菜单插件的文章。其中许多菜单插件都提供在菜单中加入图片和彩色背景的选项。

鉴于有多种插件可以为导航菜单添加特定背景，我们将提供两种插件的教程，其中一种可以在子菜单后面添加背景。相比之下，另一种则是在移动菜单中添加背景。

要为不同的子菜单添加背景图片，请安装并激活 WP Mega Menu 插件。该插件可以激活和管理具有多个下拉层级的巨型菜单。它是大型网店的理想选择，但它也适用于较小的菜单，尤其是如果你想添加背景图片或图标的话。

WP Mega Menu 插件

首先在 WordPress 面板中找到 WP Mega Menu 选项卡。

点击 Themes 菜单项。

转到 Themes 面板

在这里，您可以看到插件为您的菜单创建的默认主题列表。

您可以点击编辑任何主题，或从头开始添加自己的设计。

多种 Mega Menu Themes

每个主题都有自己的设置，你可以在设置中指定主题标题、菜单栏选项和品牌徽标等元素。从下拉菜单到子菜单，菜单的每个部分都可以自定义。

不过，对于菜单背景，您只需知道要选择哪个主题即可。

设置 Mega Menu 主题

进入仪表板中的外观 > 菜单。

转到外观 > 菜单

你会看到一个链接到 Mega Menu Settings 的新模块。

单击 Enable 启用 mega menu，然后选择最适合您网站的菜单。

最后点击 Save  按钮。

单击“启用”按钮

现在，将注意力转移到 Menu Structure 区域。

滚动任何当前菜单项都会显示一个 WP Mega Menu 按钮。您可以在此自定义每个下拉菜单部分的布局和设计。

点击你想要的任何菜单项的 WP Mega Menu 按钮。在本例中，我们将为 Shop 选项卡添加一个下拉菜单。

注意：我们假设您已经在 WordPress 网站上配置了菜单。如果需要帮助，请阅读我们的 WordPress 下拉菜单指南。

在网站上添加 mega 菜单

在新弹出的窗口中，打开开关，为该菜单项打开 Mega Menu。

然后，您可以添加一个下拉行，并将左侧的许多部件拖入该行。例如，我们将拖动一个产品列表，这样当有人滚动到 Shop 菜单项时，它们就会显示出来。

单击 Add Now 按钮

要为下拉菜单区域添加背景，请单击左下角的 Options 按钮。

选择 Options 链接

找到 Upload Background Image 字段。

单击 Upload 按钮，在媒体库中找到合适的照片作为背景。

选择 Upload Image 按钮

从媒体库中选择图片后，图片缩略图就会出现。

还有一些其他设置需要考虑，请随时查看。

验证缩略图

请务必点击 Options 面板底部的 Save Changes 按钮。

点击 Save Changes 按钮

您还需要在 WordPress 仪表板的 Menu Structure 区域点击“Save Menu”。

单击 Save Menu 按钮

现在，导航到网站前端查看菜单。如果滚动到我们刚刚自定义的项目上，就会看到一个带背景的下拉部分。

菜单现在有了背景图片

为菜单添加背景图片的另一种方法是使用移动、响应式菜单，当有人通过移动设备访问你的网站时，菜单就会显示出来。

您可以借助 WP Mobile Menu 插件在移动菜单后面放置背景图片。

WP Mobile Menu 插件

安装并激活 WP Mobile Menu 插件后，进入 WordPress 面板中的移动菜单选项。

转到 Mobile Menu Options

该插件提供了几种配置移动菜单的方法。一般要求是启用其中一种菜单格式，并指明该移动菜单要使用哪个 WordPress 菜单。

例如，我们可以点击 Enable Left Menu（打开位于屏幕左侧的移动菜单），然后从  Left Menu 下拉菜单中选择 Main Menu 选项。这样就可以将当前的主菜单与移动菜单连接起来，这样访问者就可以看到相同的标签。

设置移动菜单选项

这取决于你创建的移动菜单类型，但由于我们创建的是左侧菜单，所以可以点击左侧菜单选项卡，显示添加背景的相应设置。

选择左侧菜单设置

向下滚动到 Panel Background Image 字段，点击 “+”号打开媒体库。

添加移动菜单背景图片

从媒体库中选择一张图片并将其添加到字段中。

您应该会看到背景图片的缩略图作为确认。

选择 Save Changes 按钮激活背景。

用缩略图验证背景图片

由于插件会生成移动菜单，因此菜单可能只在浏览器设置为窄宽度或在手机或平板电脑上访问网站时才会显示。

新菜单会合并到汉堡包图标（三条横线）下。

点击该图标，测试新菜单的背景。

点击汉堡菜单图标

如截图所示，背景会放在整个移动菜单的后面，让所有人都能看到。

带背景图像的移动菜单

如何为维护页面添加 WordPress 背景图片

所有网站偶尔都需要维护，有时维护时间过长，显示维护页面会有所帮助。

在维护页面中，背景图片发挥着重要作用。大多数维护页面由一张全屏背景图片和一些文字或更多资源链接组成。

如果你已经有了一个维护页面，但它不包括背景图片，可以考虑采取以下步骤，为你可能需要关闭网站一段时间的公众提供一个优美的环境。

你可以借助 Maintenance 插件为维护页面添加背景图片。在网站上安装并激活插件。

Maintenance 插件

激活后，在仪表板顶部找到 Maintenance is On/Off 按钮。

点击该按钮进入维护插件的设置页面。

单击 Maintenance is off 链接

进入设置页面的另一种方法是点击仪表板侧边菜单中的 Maintenance 菜单项。

点击 Maintenance 菜单项

Maintenance 插件的 Settings 页面上有大量可定制的选项，但需要考虑的主要区域是  General Settings 模块。在这里，你可以写入标题和描述，它们都是覆盖在我们将要插入的背景之上的文本。

页面标题会显示在浏览器标签页中，所以你也应该考虑自定义页面标题。

从维护页面到即将推出的页面，你都可以使用维护插件，因此你可以输入类似“我们的网站正在维护中”这样的内容，也可以显示一些关于你公司的信息，并包含一个供人们输入电子邮件地址的表单。

为维护页面添加标题

接下来，插件还提供了上传徽标的选项，徽标也会叠加在背景图片之上。

Upload Logo 按钮

单击 Upload Logo 按钮并选择徽标，即可在仪表板中看到其缩略图。

维护页面的 Logo

最后，背景图片栏要求你点击上传背景图片。

可以从电脑上传图片，也可以在媒体库中查找适合维护页面的背景图片。

注意：最好的维护背景图片是大尺寸、高分辨率和横向的。下面的设置中提供了一种 Portrait Mode 背景选择。

单击 Upload Background 按钮

选择背景后，它将以较小的缩略图预览形式出现在仪表板中。

背景图片缩略图

虽然横向背景图片对于台式电脑和较宽的屏幕来说最合理，但许多人在访问网站时使用的是纵向屏幕，比如竖着拿手机。

因此，较宽的背景图片看起来就不那么美观了。因此，该插件提供了一个 Portrait Mode Background Image 作为替代，当用户使用纵向屏幕访问页面时，背景图片就会响应式地切换进来。

在该字段中包含图片非常重要，因此请单击 Upload image for portrait device orientation 按钮。

上传纵向背景图片

这一次，请找到一张高度大于宽度的图片（纵向模式）。你可以裁剪原始背景图片使其变成纵向，也可以选择上传完全不同的图片来填补空白。

突出显示你想要的图片，然后单击 Select Image 按钮将其插入仪表板。

选择背景图片

除非激活维护模式，否则所有这些设置都毫无意义。

为此，请找到 Settings 页面顶部的 Maintenance On/Off 开关。

设置维护页面 On 或 Off

打开开关，使其显示为 On，然后选择 Save Changes 按钮。

启用维护页面

进入网站前端，确保背景图片和维护页面正常显示。

很有可能没有显示。

这有两个原因： 首先，您必须注销 WordPress 管理帐户才能看到维护模式网站。其次，您可能需要清除网站缓存以更新内容变化。

在 Maintenance Mode 下查看网站

例如，当我注销管理员账户后，进入任何页面时都会显示维护页面。

背景图片就在那里，还有我的自定义内容，如徽标和文字说明。

维护页面的背景图片

此外，将浏览器窗口的大小更改为纵向，就能将纵向模式背景固定到位。

在手机或平板电脑上访问网站时，也可以看到纵向模式。

纵向模式下的背景图片

该插件的另一种背景图片称为预加载器图片。它主要是在显示实际的维护页面、背景和内容之前，快速加载一张具有动画效果的图片。

与普通背景图片一样，点击 Upload Preloader 按钮，找到一张看起来不错的图片并将其添加到仪表板上。

再次点击 Save Changes 按钮并清除缓存。

点击 Upload Preloader 按钮

默认情况下，Preloader Image 效果会旋转片刻，然后消失，呈现维护页面和背景图像。

是否保留这种效果完全取决于您的意愿。

为背景图片添加介绍效果

在 Maintenance 插件的 Settings 面板中，您还可以尝试其他一些背景元素。

例如，你可能想添加背景颜色而不是背景图片。

如果是这样，请转到 Background Color 字段，选择适合您品牌的颜色。

打开背景颜色字段

除非禁用所有其他背景图片，否则维护页面不会显示背景色。

因此，请确保删除了背景图片。

删除背景图像

您还必须删除 Portrait Mode 背景图像。

设置 Portrait Mode 背景图像

保存更改并清除缓存。然后进入网站前台查看背景颜色的效果。

检查网站前台

需要考虑的其他设置包括字体颜色、字体家族和背景模糊等项目。

我们还建议您考虑是否需要前台登录。这将为用户提供一种登录账户的方式，并在必要时访问个人资料。

一切完成后，单击 Save Changes 按钮。

设置字体颜色

Maintenance 插件还提供多个预制主题，这些主题具有精美的背景图片和专业设计的布局和文本。

您可以找到“即将发布”页面和维护布局的主题，以及用于收集电子邮件地址和其他联系信息的页面。

您必须购买这些主题才能使用。

购买高级主题

根据您的预算，它们相当便宜，而且外观漂亮。

模板示例

对于那些对购买主题不感兴趣的用户，上述所有设置均可供您使用。您还可以进入 Custom CSS 模块，随心所欲地配置维护页面和背景图片。

进入 Custom CSS 模块

请记住，除非您退出管理员账户并点击 Clear Cache 按钮，否则维护页面设置很少生效。

使用 Kinsta 时，您可以在仪表板的右上角找到 Clear Cache 按钮。如果使用不同的主机，可以考虑使用市场上众多的缓存插件之一。

点击 Clear Cache 按钮

清除缓存并保存设置后，您就可以看到与维护页面相得益彰的精美背景图片！

检查维护页面

如何使用第三方页面生成器添加 WordPress 背景

我们在最佳页面生成器一文中提供了选择具有拖放功能的页面生成器的一系列选项。WordPress 的 Gutenberg 中已经包含了一个页面生成器，但许多网站所有者更喜欢其他解决方案。

下文将介绍如何使用一些流行的页面生成器来实现背景，包括 Elementor、Beaver Builder 和 SiteOrigin 的 Page Builder。

使用 Elementor 添加 WordPress 背景

Elementor 是一款流行的页面生成器，旨在大大加快网站制作速度，它提供了一个免费插件，其中包含多种背景图片工具。

此外，Elementor 还为网站的各个部分提供了可视化背景灵活性，而不是将背景限制在整个网站上。例如，你可以在任何积木式部分后面添加背景，并在页面与页面之间显示不同的背景。

首先，安装并激活 Elementor 插件。

Elementor 插件

Elementor 将背景设置分散在整个生成器中，这样就可以很容易地选择元素并在需要时实现背景。因此，从技术上讲，你可以进入任何页面或文章，期望获得背景上传按钮。

在本例中，我们将访问测试网站的主页。从 页面 > 所有页面 的列表中选择页面，访问所选页面。您也可以对文章进行同样的操作。

进入 WordPress 默认页面编辑器后，点击 使用 Elementor 编辑 按钮。

点击使用 Elementor 编辑器

这样，屏幕上的视图就会切换到 Elementor 编辑器。在这里，左侧有一个菜单，通过拖放模块来构建和编辑页面。

背景功能不在章节或块中提供，而是在该页面的主要设置中提供。

因此，请点击编辑器左下角的设置小图标（看起来像一个齿轮）。

单击设置图标

这将显示一般页面设置部分。

单击 Page Settings 部分顶部的 Style 选项卡。

转到 Style 选项卡

在 Style 下找到 Background Type 字段，点击画笔图标添加标准背景。

设置 Background Type 字段

接下来，选择您希望出现的背景类型。例如，Color 字段允许你将背景切换为纯色。如果你喜欢渐变，Background Type 字段中还有一个 Gradient 选项。

设置背景颜色字段

单击图像字段下的 Choose Image 按钮，调出媒体库并选择适合此页面的背景图像。

点击 Choose Image 按钮

像往常一样，测试你的背景图片，并坚持最佳尺寸和最佳做法（大多数情况下都是高分辨率和纵向），然后选择效果良好的图片，单击 Insert Media 按钮。

点击 Insert Media 按钮

选定的背景图片现在会出现在右侧的 Elementor 网站预览中。您可能需要调整内容的其他部分，以确保文本和图片等项目显示在背景之上。

Elementor 提供了位置、附件、重复和 WordPress 背景图片大小等图片背景设置。修改这些设置，以确定你的背景作为固定附件、右上角方向或其他尺寸是否会更好看。

点击 Update 按钮，将所有更改保存到页面并发布网站的新背景。

添加新背景

使用 Elementor 创建版块背景

Elementor 为添加到页面中的大部分版块提供高级背景功能。

您只需在 Elementor 页面上选择一个版块，然后修改背景设置，即可将背景限制在该区域内。

例如，我们可以选择 Text Editor 部分来查看文本部分的设置。

使用 Elementor 选择文本部分

选择 Advanced 选项卡，然后在该选项卡中找到 Background 部分。

转到 Background 部分

Background 设置包括  Background Type, Color, Image 等，与我们看到的一般页面背景设置非常相似。唯一不同的是，它将这些设置限制在选定的部分。

为 Background Type 选择画笔图标，然后单击 Image 字段下的 Choose Image 按钮。

单击 Choose Image 按钮

从媒体库中选择图片，然后单击 Insert Media 按钮。

选择图片并点击插入媒体按钮

如你所见，背景图片将保留在该部分的边界内，同时位于已为该部分创建的内容后面。

使用 Position, Attachment, Repeat, 和 Size选择器来修改背景图片在版块中的显示方式。

最后，单击 Update 按钮保存更改。

点击更新查看更改

使用 Beaver Builder 添加背景图片

Beaver Builder 插件包含一个带有一些基本背景工具的精简版。它是市场上最受欢迎的页面生成器之一，提供许多内容模块，如视频、图片、段落等。

除此之外，它还允许你使用可视化工具和 CSS 将背景元素放置在整个网站、一个页面或页面上的某个部分，从而实现背景图像、颜色或视频。

首先，安装 Beaver Builder 插件，开始使用。

Beaver Builder 插件

转到任何页面或文章，使用 Beaver Builder 对其进行编辑。

您必须将以前创建的页面转换为 Beaver Builder 格式。或者，您也可以从头开始创建一个页面，然后选择在 Beaver Builder 中编辑该页面。

要将当前页面转换为 Beaver Builder 格式，请打开该页面编辑器，然后点击右上角的三点图标，打开 View 菜单。

进入页面设置菜单

向下滚动，找到并选择 Convert to Beaver Builder 链接。

它会尝试编译页面上的所有内容，并将这些元素转换为兼容的 Beaver Builder 模块。

点击 Convert to Beaver Builder 链接

要从头开始创建页面，请转到 Pages > Add New。

然后点击 Launch Beaver Builder 按钮。

点击 Launch Beaver Builder 按钮

Beaver Builder 插件会将您带入网页的前端视图。它占据了屏幕的大部分，是一个真正的前端编辑器，你可以点击元素并用鼠标移动方框。

通过 Beaver Builder 添加背景的第一种方法是上传背景到一个部分块。这可能占据页面的大部分，也可能只占页面的一小部分，这取决于你的区块大小。

选中后，找到 Row Settings 按钮（⚙ 图标）。

单击该图标即可显示该行的设置。您也可以对节和列以及其他类型的块进行设置。

编辑行设置

网站预览顶部会出现一个设置面板。单击 Style 选项卡，然后查找 Background 部分。

在 Background 下，单击下拉菜单以显示所有背景类型。

转到 Style 选项卡

您可以考虑几种背景类型，其中一种是照片背景。其他类型包括

• 颜色
• 渐变
• 视频
• 嵌入代码

为 WordPress 背景图片设置类型

随意测试不同的背景类型。

例如，您可能会发现 Gradient 背景比图片更好看。每种背景类型都有自己的设置。在这种情况下，渐变类型需要两种颜色，以便渐变从一种颜色移动到另一种颜色。

关于公司部分

选择照片背景后，会显示从媒体库中选择图片或粘贴图片 URL 的字段。如果使用媒体库照片源，请单击 Select Photo 链接。

点击 Select Photo 链接

查找您喜欢的背景照片，然后点击  Select Photo 按钮。

选择媒体

Beaver Builder 会将照片放入之前选择的背景空间。在 Photo Settings 部分，您需要了解照片的格式。您可以选择Size, Repeat, Position, 和 Attachment 等选项。

设置背景图片大小

全局和整页 Beaver Builder 背景图片

Beaver Builder 与默认的 WordPress 设计工具配合使用，可利用内置的背景功能。

因此，您可以进入外观 > 背景选项卡，为整个网站激活照片背景。

或者，在 Beaver Builder 中打开任何网页，点击左上角的 Tools 下拉菜单。

在此，单击 Global Settings 选项。

Beaver Builder 的全局设置

全局设置面板可以更改整个网站，覆盖或修改 WordPress 的内置编码。因此，我们要插入一个 CSS 代码块来更改整个网站的背景图片（全局）。

单击 Global Settings 中的 CSS 选项卡，然后将以下代码段粘贴到字段中：

body {
background-image: url("URL to Image");
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: 100%;
background-color: #0f1066;
}

用所需背景照片的 URL to Image 的 URL。您还可以使用 CSS 代码更改重复功能、附件和背景大小等内容。

转到 CSS 选项卡

使用 Beaver Builder 制作自定义页面背景更为合理，因为每个页面都有自己的背景图片。

在页面编辑器中，再次打开 Tools 菜单。

选择 Layout CSS & Javascript 选项。

Layout CSS & JavaScript 按钮

将相同的代码粘贴到 CSS 选项卡中，将 URL to Image 文本更改为实际 URL，并调整任何设置：

body {
background-image: url("URL to Image");
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: 100%;
background-color: #0f1066;
}

正如你所看到的，整个背景会变成 CSS 代码中的 URL 图像。请记住，Layout CSS / Javascript 面板只控制当前页面。除此页面外，你不会在其他页面上看到背景。

添加自定义 CSS

通过 Page Builder By SiteOrigin 添加简单的行或小工具背景

Page Builder by SiteOrigin 是另一种拖放式可视化网站制作工具。它为整个网站插入背景的能力有限（您需要使用标准的 WordPress 自定义背景工具）。不过，它提供了为SiteOrigin使用的行和部件添加背景图片和颜色的设置。

首先，下载并激活 Page Builder by SiteOrigin 插件。

Page Builder by SiteOrigin 插件

导航到一个新页面，或考虑在网站的当前页面上添加 SiteOrigin 行。

每个 SiteOrigin 部分都要求您 Add Widget 或 Add Row。如果你不想从头开始设计，也可以浏览预置布局。

好消息是，SiteOrigin 中的部件和行都有包含背景图片的设置。

因此，单击 Add Widget 或 Add Row 按钮继续。

添加新的部件或行

在本例中，我们将查看 Widgets 库。

在这里，你可以从 SiteOrigin 提供的众多部件中选择一个，从导航菜单和页面到文章内容和产品列表。

在这个例子中，我们将选择 Products 小部件，但您也可以根据自己的设计需要选择其他小部件。此外，您还可以使用行将这些部件分组，然后为该行添加背景图片，这样背景图片就会出现在多个部件后面。

选择 Products 部件

新的部件或行最终会出现在 SiteOrigin 页面编辑器中。SiteOrigin的大部分功能仍在WordPress仪表板中，因此不像其他页面生成器那样有前端编辑器。

要为任何SiteOrigin项目添加背景，请滚动该元素并点击 Edit 链接。

点击 Edit 链接

在这个例子中，我选择了 Products 小工具，但每个小工具都有自己的设置，可以配置它在网站上的外观。

背景工具位于 Design 下拉菜单下方。点击该链接继续。

WordPress 背景图片的 Design 选项卡

找到 Background Image 字段，点击 Select Image 按钮。

您还可以选择为背景图片粘贴 External URL。

选择背景图片和颜色

媒体库会显示您当前上传到 WordPress 的图片。点击最适合该背景的图片，然后选择 Done 按钮，将其放入 SiteOrigin 模块。

点击 Done 按钮

现在，Background Image 栏会显示该照片的缩略图。

向下滚动设置，配置从 Background Image Display 到覆盖文字的 Font Color 的所有设置。

一般来说，选择 Cover 显示应该可以获得理想的效果。SiteOrigin 插件的默认设置似乎是平铺显示，所以你可能需要更改。

完成背景的自定义设置后，请务必点击 Done 按钮。

WordPress 的 Background Image 设置

小部件（本例中为 Products 小部件）进入该页面的 SiteOrigin WordPress 编辑器。您可以在页面上任意拖动该元素，并在其上下添加新的部件和行。

您必须点击 预览 或 更新 按钮，然后浏览页面的前端才能看到结果。

转到“产品”部分

目前我添加的背景图片出现在之前的 Products 部件的限制范围内。这个背景显然还需要一些编辑才能看起来更漂亮，但这是一个优质的开端，可以用一个看起来更有创意的背景图片来归档空间。

该部分的背景

使用 Brizy 添加独特的背景图片

本次演示的最后一款页面生成器 Brizy 提供了时尚的模板和卓越的前端界面，可用于添加不同寻常的设计和快速定制。

Brizy 页面生成器包含大量拖放模块，可将其整合到你当前的网站中。它还允许你从空白模板开始，用 Brizy 构建你的整个网站。

因此，您会很高兴听到 Brizy 还为您通过页面生成器添加的几乎所有元素提供了背景工具。更不用说，Brizy 还有几种独特的背景样式，比如在背景中添加循环视频或完整地图。

要利用这些背景设置，安装并激活 Brizy 插件即可开始使用。

Brizy 页面生成器插件

Brizy 设计流程的大部分要求您从空白模板开始。Brizy 会尝试将您的旧设计转换成 Brizy 模块，但我们发现最好还是从头开始。

转到 WordPress 仪表板中的页面或文章，然后开始创建页面，加上标题和一些内容。

你会看到一个 Edit With Brizy 按钮。点击该按钮即可进入完整的 Brizy 页面生成器。

点击 Continue to edit with Brizy 按钮

Brizy 页面生成器会显示网站的完整预览，包括按钮、文本和图像。如果页面是空白的，请点击 Start Building Your Page 按钮。

点击加号图标开始创建页面

在上部菜单栏中查找 Layouts and Blocks 选项卡。

布局提供预建网页，其中包含演示内容，只需自定义公司内容即可使用。区块是较小的网页块，但它们仍然是预建的，通常比你自己制作一个区块更容易使用和操作。

无论你选择哪个方向都没有关系。浏览布局和区块，在页面中添加你想要的元素。这些都是你用来组成一个完整网页的元素。

布局和区块部分

当你在网页上制作了一些区块或布局后，回到编辑器屏幕查看你的作品。

你会发现每个区块的右上方都有一个 Settings 图标。

点击你所选区块的设置图标。我们将为该图块添加背景。

点击 Settings 图标

区块设置面板保留在右上角。滚动菜单图标，查看它们的作用。

其中一个是  Colors，指的是背景颜色。如果你更希望使用纯色或渐变色背景视图，可以更改并添加渐变色。

背景的 Color 按钮

左边的图标按钮包含 Background 设置。

点击该按钮可打开快速工具，为该图块上传背景图片。

WordPress 背景图片按钮

Brizy 提供三种媒体背景项目：

• 图片
• 视频
• 地图

首先，试用图片类型，了解它如何与您当前的布局配合使用。

点击图片上传区域，在媒体库中找到一张照片并将其添加到背景中。

WordPress 背景图片类型

我们为本教程找到了一张木板照片，并表示我们希望没有视差效果。

这样就增加了一种令人愉悦的效果，因为彩色背景起到了叠加的作用，但我们仍然可以看到背后的木质纹理。

记住，你可以随时调整视差字段，使背景图片成为固定、动画或滚动背景。

无视差背景图片

这就是使用 Brizy 插入背景图片的方法！

Brizy 最棒的地方在于，你可以在设计中不断移动，点击每个部分的 Settings 按钮。

一个部分下来，我们就可以插入另一张背景图片，而无需花费太多时间。

添加另一张背景图片

为了展示其他背景类型的强大功能，我们可以点击地图背景类型，输入一个地址，然后在前景内容后面就会出现该地点的地图。

如果默认设置下的地图效果不佳，该地图会作为完整背景出现，并具有缩放功能。

将地图添加为 WordPress 背景图片

最后，我们推荐你使用 Brizy 背景视频工具，它与图片背景工具位于同一区域。它的工作原理是插入一个视频 URL（YouTube 或 Vimeo），在前景内容后面呈现一个完整的视频。它甚至还提供了循环播放视频的设置，并可在用户滚动页面时选择开始播放的时间。

WordPress 背景图片的 URL

下面的动画 gif 给出了视频操作的一个简短示例，尽管它可能需要一些编辑。

视频背景

背景图片大小、来源和基本编辑

我们在文章前面提到，尽管背景图片没有完美的尺寸，但我们建议从不小于 1024 x 768 像素开始，并坚持使用 16:9 这样的常用长宽比。长宽比并不像图片的实际大小和分辨率那么重要，因为您可以裁剪图片或让 WordPress 代劳。

如果不打算自己拍照，找到合适的地方购买或借用 WordPress 背景图片也很重要。

到哪里寻找合适的背景图片

关于背景图片搜索，请查看我们的指南：无需离开 WordPress 即可查找和添加图片库照片。我们还有一份有用的图片市场来源清单，用于寻找高分辨率的图片库照片，其中很多都是免费的。

总之，我们建议您尝试自己拍摄背景图片。如果不可能，或者您没有摄影或平面设计经验，可以考虑使用免费的图片库资源。您也可以选择从许多优质图片库网站付费购买背景图片，其中有些网站会收取月费，让您下载大量照片。

这些链接中的一些亮点包括：

• Unsplash – 免费，无需署名。
• Visual Hunt – 免费照片。大多数图片无需署名。
• Pexels – 免费，无需署名。
• Pixabay – 免费，大部分图片无需署名。
• iStockphoto – 以相当低廉的价格订购免版税图片。
• Shutterstock – 免版税图片，订阅费用合理。

如何使用自定义 CSS 更改 WordPress 背景图片

我们已经了解到，您可以使用标准的 WordPress 内置工具或插件添加 WordPress 背景图片。选择哪种方式并不重要，只要能得到想要的结果就行。您还可以选择使用自定义 CSS 来调整背景图片的样式，或者将其添加到您的网站中。

由于每种背景图片和主题都会有不同的处理方法，我们就不介绍自定义 CSS 的复杂性了。不过，我们建议您阅读我们关于在 WordPress 中编辑、添加和自定义 CSS 的指南。这篇文章涵盖了为任何网站部分（从菜单项到特定页面块）添加背景图片的实用技巧。

修复 WordPress 背景图片的常见问题

所有 WordPress 网站都具有添加背景的功能。但这并不意味着所有网站都能使用这一核心功能。例如，你可能会发现你使用的主题不支持自定义背景。又或者，你一直在上传背景，但它看起来不太合适（太大或太模糊）。

在 WordPress 中遇到背景问题令人沮丧，不幸的是，这种情况也很常见。我们汇编了以下一些最常见的背景图片问题，并列出了每种解决方法。

我的主题不支持 WordPress 背景图片

主题开发人员可以控制 WordPress 中的自定义背景功能。他们可以打开或关闭该功能，这取决于他们是否希望启用自定义背景支持。如果不需要，或者与主题的整体设计相冲突，背景就会被关闭。

如果你发现自己的主题不支持自定义背景，或者在添加背景时限制了你的能力，请考虑以下解决方案：

• 更换一个支持自定义背景的主题。在购买或下载主题时，在功能列表中查找自定义背景。
• 使用背景插件覆盖被阻止的自定义背景默认功能。

虽然可以使用自己的自定义编码或在主题文件中重新设置自定义背景，但我们通常建议不要使用这两种方法。最好的办法是找到一个支持背景的主题，或者添加一个允许背景但不会对主题功能造成太大影响的插件。

我的 WordPress 背景图片颜色太深或颜色不对

背景图片变暗可能源于背景图片本身的许多设置。大多数情况下，这与叠加滤镜或背景颜色不合适有关。

对于大多数背景变色的情况，你必须检查控制背景本身的主题或插件。

查找背景栏附近是否有要求滤镜或叠加的设置。您还可能会发现一个不透明功能，应清除该功能，这样背景才能正常显示。

如果其他方法都不奏效，主题文件中可能已经硬编码了背景过滤器。在这种情况下，请联系主题开发人员，了解有哪些方法可以纠正背景颜色。

我的 WordPress 背景图片位置不对

背景图片显示在错误的位置往往会影响网站的整体设计。你可能会发现背景过于偏左或偏右，或者本应是背景的中心焦点根本没有出现在屏幕上。

幸运的是，移动背景只需点击几下按钮。

进入 WordPress 仪表板中的外观 > 背景。找到当前作为背景上传的图片，然后查找 Position 字段。这个字段可以让你移动背景的位置，有向左、向右、向顶、向底或向角移动的选项。

我们建议点击所有定位按钮来查看它们产生的结果。找到合适的位置后，保存页面。

我的 WordPress 背景图片重复出现

纹理和纯色背景在重复显示时通常会更好看，因为它们会忽略图像的断点。然而，许多图片在重复作为背景时看起来很糟糕，尤其是那些有大量细节和不同颜色的图片。

如果您的源图片不够大，无法覆盖整个背景而又不显得拉伸，重复背景图片布局就会派上用场。因此，WordPress 有时会默认使用重复布局来保持图片的分辨率。

这个问题的主要解决方案位于 WordPress 中的外观 > 背景的背景部分。在上传照片作为背景时，可以尝试使用 Fill Screen, Fit To Screen, 或 Custom 等预设，而不要使用 Repeat 预设选项。

不过，你可能会发现，试图让一张较小的图片覆盖整个背景屏幕会导致不愉快的结果。在这种情况下，最好的解决办法是完全替换背景源图片，并寻找一张大尺寸、高分辨率且可发布到网络上的图片。

我的 WordPress 背景图片被拉伸

背景图片被拉伸意味着您的自定义背景设置试图使用较小的图片，并用图片覆盖整个屏幕。

如果较大的高分辨率图像不符合所需的长宽比，也会出现这种情况。对于拉伸的背景图片，请考虑源文件。选择其他合适的图片是最好的选择。

还有一个问题是背景设置可能有误。检查一下背景图片的位置，以及在 Fill Screen 模式下被拉伸到画布上的情况。你可能只需要坚持使用原始尺寸或添加 Repeat 函数就能解决所有问题。

其他背景故障排除技巧

• 主题开发人员对 WordPress 中的自定义背景功能拥有完全的控制权。如果你安装了一个主题却无法使用背景，最好的办法是联系主题开发人员或安装一个新主题，看看是否能解决问题。
• 自定义背景颜色和图片通常会覆盖您为控制背景图片大小、位置或来源而实施的任何自定义 CSS 代码。你可能不得不坚持使用主题的背景设置，而不是使用自定义 CSS。
• 主题在出售时可能已经激活了自定义背景。通常情况下，你只需将背景图片换成新的即可。有时，有必要进入主题文件或使用自定义 CSS 来覆盖主题设置。

最佳 WordPress 背景图片插件

如果您想进一步编辑背景图片，对视频背景感兴趣，或者想使用工具制作特定页面的背景，您可以考虑使用以下 WordPress 背景图片插件：

Simple Full Screen Background Image

Simple Full Screen Background Image 插件

Simple Full Screen Background Image 插件与 WordPress 的默认背景图片工具并无太大区别，只是增加了自动调整浏览器大小和比例等功能。

总的来说，这个插件最适合那些发现自己的主题阻止了添加背景的功能，或者在使用 WordPress 内置背景工具时遇到困难的用户。它可以覆盖 WordPress 上的内容，并在 WordPress 仪表盘上添加一个特殊的背景按钮，以便即时从电脑上传图片。

仅此而已！

该插件还有一个高级版本，提供更好的缩放功能，支持无限数量的背景和独特的效果，还有更多。

Advanced WordPress Backgrounds

AWB – 高级 WordPress 背景插件

Advanced WordPress Backgrounds 插件采用不同的方法来处理 WordPress 背景，让您可以利用独特的效果为您的背景增色添彩。视差背景就是一个例子，当用户滚动浏览网站时，它可以随着用户慢慢移动。

该插件还支持视频。视频背景可以从 YouTube 和 Vimeo 等网站提取，您也可以自行托管。

还可以使用纯色或纹理背景。所有这些背景类型都具有基本 WordPress 背景工具所不具备的高级功能。其中包括滚动和缩放效果、不透明度效果和自定义速度选项。

它支持 Gutenberg，可以与标准 WordPress 编辑器和许多其他可视化页面构建工具配合使用。最后，您还可以使用自定义 CSS 选项为您的背景添加更多风格。

Perfect Images + Retina

Perfect Images + Retina 插件

Perfect Images + Retina 插件是一个二合一解决方案，非常方便。它可以让你管理 WordPress 背景图片的大小和外观，同时还能重新生成缩略图和替换图片。图片管理功能相当强大，对于高分辨率背景尤其重要。

如果您选择高级版本，该插件还提供背景功能。它会为背景图片生成视网膜等效图像，这样即使在高分辨率显示器上，图像也能呈现出应有的效果。

Maintenance

带 WordPress 背景图片的 Maintenance 插件

Maintenance 是一款简单易用的插件，用于设计维护页面和即将发布页面。Maintenance 插件有免费和高级两个版本，但免费版本足以激活维护页面，并添加背景图片，叠加文本和字段。

你甚至可以上传自己的徽标，自定义字体和图标等内容，还可以选择带有精美背景图片的各种模板。您还可以安装它的许多预建模板，但其中大部分都需要该插件的高级许可证。

小结

添加一个基本的 WordPress 背景图片不费吹灰之力，就能在整个网站上显示。这是 WordPress 核心中内置的一项功能，因此很容易为特定事件或节日更换背景。您也可以终身使用一种背景。

除了标准的 WordPress 背景，您还可以使用自定义 CSS 代码、插件和页面生成器在 WordPress 网站上实现各种背景。从特定页面的图片背景到菜单按钮的背景，各种可能性不一而足。

现在是时候为你的 WordPress 网站添加你一直想要的背景了。

我们漏掉了什么吗？如果您在添加或管理 WordPress 背景图片时遇到困难，请发表评论。