WordPress背景图片是网站的完整背景。它也被称为自定义背景。
WordPress背景图片示例
背景也可以是纯色。
无论您选择哪种方式，在WordPress主题中，functions.php文件都会处理背景图片。WordPress的header.php文件也会显示背景图片。
因此，主题开发人员可以更好地控制是否为WordPress主题激活自定义背景功能。您仍然可以打开或关闭该功能，但您网站的主题通常会决定默认设置。
也可以为WordPress网站上的特定位置定制背景：
总的来说，如果在主题中启用了自定义背景支持，用户就可以上传图片或选择颜色来填充整个网站背景。
将背景图片上传到仪表板只是整个过程的一部分。之后，你需要配置背景图片设置。有时您可以保持设置原样，而有时则需要重新配置，以确保图片看起来非常出色。
WordPress背景图片的设置包括
我们将首先介绍使用WordPress背景图片的最佳实践。然后，我们将介绍如何在各种情况下设置WordPress背景图片。
背景图片示例
您通常可以借助自定义CSS或插件（或两者兼而有之）来实现独特的背景。本文将向你展示这两种方法。
以下是一些值得考虑的背景样式：
设置自定义背景图片似乎很容易。只需将图片上传到正确的位置，然后看着它出现在前端，对吗？
背景图片的分辨率往往会影响图片的呈现效果。您可能认为您用智能手机拍摄的图片非常适合作为背景图片，但实际上它可能需要更高的质量。
Unsplash上的免费图片库
背景图片可能不会完整地显示在网站上，因为大部分都被内容覆盖了。不过，实际图片还是会显示在整个屏幕上。
如果不使用高质量的图片，就有可能出现背景拉伸的情况。
除了图像分辨率，图像的物理尺寸也很重要。
一般来说，WordPress背景图片的最小尺寸为1024x768像素，这是个不错的原则。不过，也有专家建议使用1920x1080像素这样的尺寸。总的来说，您最好将宽度保持在1000到3000像素之间，具体取决于显示的位置。
WordPress背景图片尺寸
下一个需要考虑的因素是宽高比。背景图片是覆盖整个网站，还是只覆盖顶部的四分之一？
此外，目前台式机最常见的宽高比是16:9。保持这一目标有助于实现。响应式主题或插件可自动调整背景图片，以适应移动浏览。
最终，在实际网站和多种设备类型上测试背景图片会让最终决定变得更容易。
优化图片有两种选择：
遗憾的是，并非所有主题都支持自定义背景图片。这通常是因为背景不符合主题的整体设计，所以开发者选择将其完全关闭。
主题的自定义背景支持
其他主题网站通常会包含类似的自定义背景图片信息。如果没有，请联系开发人员，了解是否有可能以任何方式实现，以及覆盖背景图片块（如下文所述）是否会导致主题出现任何问题。
Elementorwebsitebuilder
页面生成器还往往会取代WordPress提供的默认背景图片功能。你可以在代码中覆盖主题限制或任何有助于显示背景图片的缺失元素。
谈到图片，尤其是在互联网上发布的图片，总会涉及到合法性问题。在社交媒体上有一种日益增长的趋势，人们似乎认为在照片上添加信用就可以自动使用该照片。
这是错误的。
背景图片的难处在于，由于WordPress无法为背景图片添加可见的标题，因此通常无法添加属性。而且，你也不能随便在一篇博文或一个页面上添加署名，并指望以此作为整个网站背景图片的署名。
为了保护自己，也为了尊重照片的拍摄者，在获取WordPress背景图片时，请考虑以下方法之一：
在WordPress中设置背景图片有多种方法。这些方法通常会根据您想要放置图片的位置而改变。
例如，您可能希望整个网站的背景图片保持一致。另一方面，您也可能希望在所有页面上都显示独特的背景图片。
由于存在如此多的可能性，我们将在以下部分介绍如何添加背景图片或颜色：
主题开发者决定着网站后台功能的命运。WordPress的内核中内置了这一功能，但主题开发者可能会将其关闭，从而使你无法在仪表板设置中将其打开。
如果在下面的教程中，你发现你的主题是导致你缺少自定义背景选项的原因，请考虑以下步骤来快速解决这个问题。
还可以通过functions.php文件为整个主题添加默认背景图片。只需转到前面代码中带有default-image值的区域，然后在=>后''之间的空白处添加图片的URL。
这是在WordPress仪表板上打开自定义背景的快速而简单的方法。
如果您的主题提供添加自定义背景图片的功能（许多主题都提供这种功能），您就可以更轻松地添加背景图片了。
首先，进入WordPress面板，点击外观>自定义。
点击外观菜单下的“自定义”链接
这将带你进入WordPress主题定制器，左边是定制设置，右边是网站预览。
在这里，找到并点击“背景”选项卡。
编辑器中的WordPress背景图片
如果您可以选择外观>背景，则可以更直接地使用该设置。
点击外观菜单下的“背景”链接
背景自定义区域管理整个网站的背景元素。
单击“选择图片”按钮继续。
点击‘SelectImage’按钮
在“SelectImage”窗口中，选择一张适合作为品牌和网站风格背景的图片。一般来说，黑色、白色或灰色的中性色彩模式通常有助于确保大部分文字和内容在背景的衬托下依然美观。
选择图片后，点击ChooseImage按钮继续。
选择背景图片
您选择的背景现在会出现在网站预览中。
看看所选图片是否仍能突出您的内容，并使其看起来更美观。有时，你可能会发现需要完全更换背景或更改文本或链接颜色等。
WordPress背景图片缩略图
WordPress背景图片还有一些其他设置，包括Preset字段。
点击Preset字段可使用预设设计和对齐方式更改图像格式。
WordPress背景图片的“预设”选项
您可以从以下预设中进行选择：
由于图片的尺寸、分辨率和细节各不相同，因此没有规定哪种预设效果最好。因此，你最好从Default预设开始，然后测试其他预设，看看哪个最适合你的背景图片。
如果其他方法都不奏效，可以使用Custom设置来进行更具体的选择。
用于WordPress背景图片的FillScreen预设
FittoScreen预设并不能完全满足这张图片的要求，主要是因为原始图片的长度远大于宽度，在右侧留下了大量空间。我可以将ImagePosition改为Center，但这样很可能会在两侧留下空白。
FittoScreen预设
下一个需要考虑的设置是ImagePosition工具。点击箭头可移动背景图片，调整方向，使图像焦点朝向中心或填满屏幕。
与Presets设置一样，ImagePosition工具也需要一个猜测和检查的过程，因为原始图像及其内容决定了它的外观。
WordPress背景图片位置
接下来，有一个复选框可让背景图片ScrollwithPage。
选中该复选框后，背景图片会紧贴前景内容，并随着用户在页面上的上下移动而滚动。
启用“随页面滚动”选项
取消选中该复选框往往会改变背景图片的总体方向，但其主要功能是在用户向下滚动页面时让背景保持静态。
禁用ScrollwithPage选项
使用自定义预设
除自定义预设外，选择其他预设时，没有太多额外的设置可配置。
不过，选择“自定义预设”可以打开其他几个字段供您考虑。
例如，你可以选择FilltheScreen或FittoScreen，然后将其与重复或不重复的背景图片相结合，将预设中的元素结合起来。此外，你还可以使用ScrollWithPage选项。
背景图像的预设和图像大小
看看是否可以使用未经任何编辑或设置的原始图像。有时，原始照片几乎完全符合用作背景的要求，那么为什么要破坏已经准备好的东西呢？
不过，对于你的网站来说，它的尺寸也可能过大，或者长宽比不是很合适。无论如何，我们都建议你尝试一下这个设置，看看是否适合你。
设置背景图片大小
一旦决定了完美的背景设置（在本教程中，默认选项看起来不错），点击Publish按钮即可在网站上显示更改。
点击发布按钮
进入网站前端查看背景效果。
查看WordPress背景图片
例如，进入本网站的Shop页面，就会看到产品选择后面的背景。
另一个页面上的WordPress背景图片
如何为整个网站设置背景色而不是图片
在整个网站上激活背景色的过程与打开背景图片没有太大区别。首先进入仪表板中的外观>背景，然后查找背景颜色字段。
单击“选择颜色”按钮，打开更多设置，选择和切换不同的背景颜色。
选择纯色作为背景
另一种方法是点击颜色面板，为背景找到最合适的颜色。如果你想选择一种简单的颜色，面板底部甚至还有常用的色块。
要激活背景颜色，请确保该颜色已被选中并显示在SelectColor预览中。
选择背景颜色
要显示彩色背景，只需点击背景图片预览下方的移除按钮。
删除WordPress背景图片
现在，颜色会出现在整个网站的内容后面。就像使用图像背景一样，请仔细查看网站，确保所有文本、图像和链接在新背景下仍然可见。
预览纯橙色WordPress背景
但是，如果您想在WordPress上插入一张图片，作为单个WordPress页面的背景，该怎么办呢？上一节概述了全站背景图片的全局设置。
在本节中，我们将介绍如何使用一种主要方法和几种替代方法为页面添加WordPress背景图片，如果你不介意花钱购买插件或选择页面生成器的话。
注：使用古腾堡编辑器还是经典WordPress编辑器并不重要。
对于特定页面背景，这些方法似乎最有效：
为页面添加自定义CSS需要在WordPress页面设置的自定义CSS模块中找到该页面的类ID并调用背景URL。幸运的是，要找出一个页面的类ID并不难，我们可以查找它，或者你可能已经知道它是什么了。
访问网站上的页面，只为该页面添加背景。
添加特定页面的WordPress背景图片
右键单击页面上的任意位置，屏幕上会出现一个下拉菜单。选择下拉菜单底部的检查工具。
检查网页
检查框中有网页的代码行，但我们只对分配给这个网页的类标签感兴趣。说明一下，WordPress的每个页面都有一个class标签作为识别码。
使用搜索功能，输入body或class，即可找到带有page-id标签的代码行。
在本例中，ID是page-id-352，但你的页面会有所不同。
你要复制带有page-id-#关键字的整段代码，包括破折号。
在WordPress中查找页面ID
进入主题定制器
在WordPress定制器中选择“额外CSS”选项卡。
自定义器中的“额外CSS”部分
该部分允许你输入或粘贴任何自定义CSS，以便在整个网站中对项目进行操作。在本例中，它可以方便地覆盖默认背景图片，并为一个页面启用背景图片，而不是其他页面。
如有必要，如果您在安装屏幕背景图片时遇到困难，请更改自定义背景设置。例如，您可能需要修改WordPress背景图片大小、附件或位置等元素。如果不需要，请保持示例代码中的原样。
为WordPress网站添加自定义CSS
对自定义CSS满意后，点击Publish按钮。
背景图片现在显示在页面上
如前所述，为WordPress页面添加独特背景的其他方法包括使用页面生成器或允许在单个页面上添加背景图片的插件。
不过，在单个页面上放置背景图片的最便宜、最快捷的方法是使用上图所示的CSS代码方法。
现在，进入WordPress面板，点击外观>自定义。导航至“额外CSS”选项卡。
转到“额外CSS”部分
将以下代码粘贴到自定义CSS字段中：
确保在离开“额外CSS”选项卡前点击“发布”按钮，因为这将在网站上保存您的更改，并允许您在前端查看背景。
点击“发布”按钮保存更改
查看博文的背景图片
它们将内容分割成不同的部分。因此，您可以为该区块添加背景颜色或图片。
遗憾的是，WordPress的区块编辑器并没有提供可以为任何区块添加背景的全面设置。不过，有些区块可以选择加入彩色背景。
以下是为单个WordPress区块设置图片或彩色背景的技巧。
为一个区块设置彩色背景
为单个区块增添活力的最简单方法就是添加彩色背景。它不像图片背景那样花哨，但彩色背景实际上是WordPress区块编辑器中唯一一种可用于标准区块的背景类型。
注意：有些区块根本没有任何背景设置。如果是这种情况，你最好使用封面区块，并在其上叠加其他区块，本文将进一步介绍。
例如，段落区块就有激活彩色背景的设置。
更改背景颜色设置
本节显示文本颜色和背景颜色字段。
转到背景颜色区域，从可用选项列表中选择一种颜色。你也可以选择自定义颜色链接，插入自己的颜色代码或选择一种独特的颜色。
为任何WordPress区块添加彩色背景
如前所述，并非所有WordPress区块都有这种内置背景功能。如果您想制作一个不提供背景选项的图库或其他区块元素，该怎么办呢？
最快捷的办法就是使用WordPress中的组区块功能。
为此，请选择内容中已有的多个区块。在本例中，我将同时选择一个段落区块和一个图库区块。
在出现的菜单上点击堆叠的方形图标。
在下拉菜单中选择Group选项。
这会将你当前选中的任何区块合并为一个组，让你可以一起移动或编辑它们，而不是单独的区块。
将各部分归为一个区块
更改分组块的颜色设置
与标准段落块一样，分组区块也有背景颜色功能。
在这种情况下，选择你最喜欢的颜色，就可以看到该组中的所有内容现在都有了这种背景颜色。
群组块的最大优点是，它可以使用另一个没有背景功能的块（如图库区块），并允许你为其激活背景。
将背景颜色设置为蓝色
为WordPress区块添加图片背景
添加封面图片区块
现在你可以看到该图片作为封面区块的背景。
点击该图块即可开始输入段落内容，因为它的主要功能是覆盖文本。
封面区块的好处在于它提供了多种格式选项，让你可以在几秒钟内从标题跳转到段落格式。
区块的WordPress背景图片
点击区块部分的加号
搜索区块
在本例中，我插入了一张图片，并对其进行了一些格式化处理，使其在封面区块中看起来可以接受。
带有WordPress背景图片的图片区块示例
这将显示背景图片的各种调整设置，包括以下设置：
更改区块设置
向下滚动可找到叠加部分。打开该部分可以看到颜色叠加列表，以及将这些颜色设为纯色或渐变色的选项。
这是一个很好的选项，可以稍微改变背景颜色，以匹配你的品牌或突出前景内容。你还可以调整不透明度，确保叠加颜色不会完全淹没背景。
更改区块的背景颜色
有时，您只需要在页眉后添加背景即可。
首先，进入WordPress仪表板中的外观>页眉。
注：您也可以在外观>自定义>页眉部分找到页眉设置。
WordPress控制面板>外观>页眉
现在你应该会在屏幕右侧看到主页预览，以及左侧的页眉设置。
页眉模块说明了任何页眉背景图片的首选尺寸，所以你可以选择在上传前裁剪图片，或者等到在WordPress仪表板上获得图片后再上传。
在当前页眉标题下，点击添加新图片按钮。
标题很棘手，因为你要确保所有链接和文本元素（更不用说你的徽标了）在背景图片上看起来非常清晰。
因此，我们建议试用背景图片，并考虑使用纯色和图案较多的图片。它们不会让你很难看到菜单项和徽标。
选择图片
我们喜欢内置的裁剪工具，因为它会自动为标题背景图片提供正确的尺寸。与事先在Photoshop等软件中编辑照片相比，这可以加快整个过程。
将裁剪框移动到最适合背景图片的位置。如果需要进一步缩小图片，可以随意拖动其中一个角。
裁剪图片
在WordPress定制器预览中，页眉背景图片会立即激活，帮助您清楚地看到客户会看到什么样的背景。
选择页眉背景图片
标题背景的另一种选择是上传多张图片并让它们随机旋转，这样每当用户登陆网站主页时，就能为网站增添一些亮点和惊喜。
有了多张图片后，点击随机上传页眉按钮，激活每次显示不同页眉背景的功能。
添加更多页眉
您可能会发现，在页眉中添加背景图片会使您难以看到某些页眉项目，如菜单或购物车。
如果是这种情况，我们建议不要立即删除页眉图片。而是转到文本颜色和链接颜色字段，看看任何调整是否会有帮助。
文字颜色设置可控制标题中任何未超链接到其他内部或外部页面的文字。很多时候，这只意味着标语（如果有的话），但有时也可能有其他项目，如购物车总数或社交媒体图标，它们也会随文字改变颜色。
另一个方框是链接颜色。当你调整这个颜色时，很可能会看到更多的变化，因为它包括所有链接到其他页面的菜单项。
WordPress背景图片上的文字颜色
下面是一个例子，说明当你为文本颜色和链接颜色都选择一种新颜色时会发生什么。你可以看到，标语和网站名称变了，菜单变成了白色，购物车图标等大多数其他页眉元素也变了。
检查页眉元素
如果对标题使用背景图片不感兴趣，也可以选择使用纯色背景。
设置背景颜色
如果您在前端显示更改时遇到任何问题，请考虑清除WordPress缓存。
自定义CSS方法（概述如下）是最便宜的选择。不过，你也可以研究一下各种页面构建工具和插件，看看哪些它们允许在分类页面上设置背景。
要使用CSS完成这项任务，请打开WordPress仪表板，进入外观>自定义。
右键点击网页，选择检查
保存CSS标签备用。
记下列出的类别
为WordPress背景图片添加自定义编码
最后，回到WordPress网站前端的分类归档页面。现在显示的页面应该与之前相同，但背景已在CSS代码中指定。如果在WordPress背景图片格式化方面遇到任何问题，请切换回额外CSS面板，调整背景的位置、大小和重复功能等元素。
进入分类页面查看背景
LoginPress网站
选择自定义选项
只需选择自定义选项。
在下一个屏幕上，你可以看到左侧的所有自定义内容和右侧的实时预览，在这里你可以并排跟踪你所做的更改，包括
LoginPress自定义界面
接下来，你将进入背景自定义界面，在这里你可以看到3个背景选项，包括：
不同的背景选项
背景颜色
最棒的是，你还可以在WordPress自定义预览中并排跟踪更改。
背景颜色选项
背景图片
背景图片选项
除此以外，你还可以进行其他设置，以确保上传的图片当前处于最佳浏览状态，例如：
您可以根据照片的大小，使用这些选项进行调整。
图片大小选项
背景视频
现在，你可以看到又多了2个选项，包括：
背景视频选项
选择自定义视频
如果要选择任何YouTube视频，只需选择YouTubeoption>添加YouTube视频的ID。
YouTube选项
LoginPress设置页面
你可能注意到有些网站的菜单很花哨，包括背景图片或图标。这种做法在电子商务领域很常见，品牌可能会有一个超大型菜单，上面有类别和每个类别按钮的背景图片。
鉴于有多种插件可以为导航菜单添加特定背景，我们将提供两种插件的教程，其中一种可以在子菜单后面添加背景。相比之下，另一种则是在移动菜单中添加背景。
WPMegaMenu插件
首先在WordPress面板中找到WPMegaMenu选项卡。
点击Themes菜单项。
转到Themes面板
在这里，您可以看到插件为您的菜单创建的默认主题列表。
您可以点击编辑任何主题，或从头开始添加自己的设计。
多种MegaMenuThemes
每个主题都有自己的设置，你可以在设置中指定主题标题、菜单栏选项和品牌徽标等元素。从下拉菜单到子菜单，菜单的每个部分都可以自定义。
不过，对于菜单背景，您只需知道要选择哪个主题即可。
设置MegaMenu主题
进入仪表板中的外观>菜单。
转到外观>菜单
你会看到一个链接到MegaMenuSettings的新模块。
单击Enable启用megamenu，然后选择最适合您网站的菜单。
最后点击Save按钮。
单击“启用”按钮
现在，将注意力转移到MenuStructure区域。
滚动任何当前菜单项都会显示一个WPMegaMenu按钮。您可以在此自定义每个下拉菜单部分的布局和设计。
点击你想要的任何菜单项的WPMegaMenu按钮。在本例中，我们将为Shop选项卡添加一个下拉菜单。
在网站上添加mega菜单
在新弹出的窗口中，打开开关，为该菜单项打开MegaMenu。
然后，您可以添加一个下拉行，并将左侧的许多部件拖入该行。例如，我们将拖动一个产品列表，这样当有人滚动到Shop菜单项时，它们就会显示出来。
单击AddNow按钮
要为下拉菜单区域添加背景，请单击左下角的Options按钮。
选择Options链接
找到UploadBackgroundImage字段。
单击Upload按钮，在媒体库中找到合适的照片作为背景。
选择UploadImage按钮
从媒体库中选择图片后，图片缩略图就会出现。
还有一些其他设置需要考虑，请随时查看。
验证缩略图
请务必点击Options面板底部的SaveChanges按钮。
点击SaveChanges按钮
您还需要在WordPress仪表板的MenuStructure区域点击“SaveMenu”。
单击SaveMenu按钮
现在，导航到网站前端查看菜单。如果滚动到我们刚刚自定义的项目上，就会看到一个带背景的下拉部分。
菜单现在有了背景图片
为菜单添加背景图片的另一种方法是使用移动、响应式菜单，当有人通过移动设备访问你的网站时，菜单就会显示出来。
WPMobileMenu插件
安装并激活WPMobileMenu插件后，进入WordPress面板中的移动菜单选项。
转到MobileMenuOptions
该插件提供了几种配置移动菜单的方法。一般要求是启用其中一种菜单格式，并指明该移动菜单要使用哪个WordPress菜单。
例如，我们可以点击EnableLeftMenu（打开位于屏幕左侧的移动菜单），然后从LeftMenu下拉菜单中选择MainMenu选项。这样就可以将当前的主菜单与移动菜单连接起来，这样访问者就可以看到相同的标签。
设置移动菜单选项
这取决于你创建的移动菜单类型，但由于我们创建的是左侧菜单，所以可以点击左侧菜单选项卡，显示添加背景的相应设置。
选择左侧菜单设置
向下滚动到PanelBackgroundImage字段，点击“+”号打开媒体库。
添加移动菜单背景图片
从媒体库中选择一张图片并将其添加到字段中。
您应该会看到背景图片的缩略图作为确认。
选择SaveChanges按钮激活背景。
用缩略图验证背景图片
由于插件会生成移动菜单，因此菜单可能只在浏览器设置为窄宽度或在手机或平板电脑上访问网站时才会显示。
新菜单会合并到汉堡包图标（三条横线）下。
点击该图标，测试新菜单的背景。
点击汉堡菜单图标
如截图所示，背景会放在整个移动菜单的后面，让所有人都能看到。
带背景图像的移动菜单
Maintenance插件
激活后，在仪表板顶部找到MaintenanceisOn/Off按钮。
点击该按钮进入维护插件的设置页面。
单击Maintenanceisoff链接
进入设置页面的另一种方法是点击仪表板侧边菜单中的Maintenance菜单项。
点击Maintenance菜单项
Maintenance插件的Settings页面上有大量可定制的选项，但需要考虑的主要区域是GeneralSettings模块。在这里，你可以写入标题和描述，它们都是覆盖在我们将要插入的背景之上的文本。
页面标题会显示在浏览器标签页中，所以你也应该考虑自定义页面标题。
从维护页面到即将推出的页面，你都可以使用维护插件，因此你可以输入类似“我们的网站正在维护中”这样的内容，也可以显示一些关于你公司的信息，并包含一个供人们输入电子邮件地址的表单。
为维护页面添加标题
接下来，插件还提供了上传徽标的选项，徽标也会叠加在背景图片之上。
UploadLogo按钮
单击UploadLogo按钮并选择徽标，即可在仪表板中看到其缩略图。
维护页面的Logo
最后，背景图片栏要求你点击上传背景图片。
可以从电脑上传图片，也可以在媒体库中查找适合维护页面的背景图片。
注意：最好的维护背景图片是大尺寸、高分辨率和横向的。下面的设置中提供了一种PortraitMode背景选择。
单击UploadBackground按钮
选择背景后，它将以较小的缩略图预览形式出现在仪表板中。
背景图片缩略图
虽然横向背景图片对于台式电脑和较宽的屏幕来说最合理，但许多人在访问网站时使用的是纵向屏幕，比如竖着拿手机。
因此，较宽的背景图片看起来就不那么美观了。因此，该插件提供了一个PortraitModeBackgroundImage作为替代，当用户使用纵向屏幕访问页面时，背景图片就会响应式地切换进来。
在该字段中包含图片非常重要，因此请单击Uploadimageforportraitdeviceorientation按钮。
上传纵向背景图片
这一次，请找到一张高度大于宽度的图片（纵向模式）。你可以裁剪原始背景图片使其变成纵向，也可以选择上传完全不同的图片来填补空白。
突出显示你想要的图片，然后单击SelectImage按钮将其插入仪表板。
除非激活维护模式，否则所有这些设置都毫无意义。
为此，请找到Settings页面顶部的MaintenanceOn/Off开关。
设置维护页面On或Off
打开开关，使其显示为On，然后选择SaveChanges按钮。
启用维护页面
进入网站前端，确保背景图片和维护页面正常显示。
很有可能没有显示。
这有两个原因：首先，您必须注销WordPress管理帐户才能看到维护模式网站。其次，您可能需要清除网站缓存以更新内容变化。
在MaintenanceMode下查看网站
例如，当我注销管理员账户后，进入任何页面时都会显示维护页面。
背景图片就在那里，还有我的自定义内容，如徽标和文字说明。
维护页面的背景图片
此外，将浏览器窗口的大小更改为纵向，就能将纵向模式背景固定到位。
在手机或平板电脑上访问网站时，也可以看到纵向模式。
纵向模式下的背景图片
该插件的另一种背景图片称为预加载器图片。它主要是在显示实际的维护页面、背景和内容之前，快速加载一张具有动画效果的图片。
与普通背景图片一样，点击UploadPreloader按钮，找到一张看起来不错的图片并将其添加到仪表板上。
再次点击SaveChanges按钮并清除缓存。
点击UploadPreloader按钮
默认情况下，PreloaderImage效果会旋转片刻，然后消失，呈现维护页面和背景图像。
是否保留这种效果完全取决于您的意愿。
为背景图片添加介绍效果
在Maintenance插件的Settings面板中，您还可以尝试其他一些背景元素。
例如，你可能想添加背景颜色而不是背景图片。
如果是这样，请转到BackgroundColor字段，选择适合您品牌的颜色。
打开背景颜色字段
除非禁用所有其他背景图片，否则维护页面不会显示背景色。
因此，请确保删除了背景图片。
删除背景图像
您还必须删除PortraitMode背景图像。
设置PortraitMode背景图像
保存更改并清除缓存。然后进入网站前台查看背景颜色的效果。
检查网站前台
需要考虑的其他设置包括字体颜色、字体家族和背景模糊等项目。
一切完成后，单击SaveChanges按钮。
设置字体颜色
Maintenance插件还提供多个预制主题，这些主题具有精美的背景图片和专业设计的布局和文本。
您必须购买这些主题才能使用。
购买高级主题
根据您的预算，它们相当便宜，而且外观漂亮。
模板示例
对于那些对购买主题不感兴趣的用户，上述所有设置均可供您使用。您还可以进入CustomCSS模块，随心所欲地配置维护页面和背景图片。
进入CustomCSS模块
请记住，除非您退出管理员账户并点击ClearCache按钮，否则维护页面设置很少生效。
点击ClearCache按钮
清除缓存并保存设置后，您就可以看到与维护页面相得益彰的精美背景图片！
检查维护页面
下文将介绍如何使用一些流行的页面生成器来实现背景，包括Elementor、BeaverBuilder和SiteOrigin的PageBuilder。
使用Elementor添加WordPress背景
Elementor是一款流行的页面生成器，旨在大大加快网站制作速度，它提供了一个免费插件，其中包含多种背景图片工具。
此外，Elementor还为网站的各个部分提供了可视化背景灵活性，而不是将背景限制在整个网站上。例如，你可以在任何积木式部分后面添加背景，并在页面与页面之间显示不同的背景。
Elementor插件
进入WordPress默认页面编辑器后，点击使用Elementor编辑按钮。
点击使用Elementor编辑器
这样，屏幕上的视图就会切换到Elementor编辑器。在这里，左侧有一个菜单，通过拖放模块来构建和编辑页面。
背景功能不在章节或块中提供，而是在该页面的主要设置中提供。
因此，请点击编辑器左下角的设置小图标（看起来像一个齿轮）。
单击设置图标
这将显示一般页面设置部分。
单击PageSettings部分顶部的Style选项卡。
转到Style选项卡
在Style下找到BackgroundType字段，点击画笔图标添加标准背景。
设置BackgroundType字段
接下来，选择您希望出现的背景类型。例如，Color字段允许你将背景切换为纯色。如果你喜欢渐变，BackgroundType字段中还有一个Gradient选项。
设置背景颜色字段
单击图像字段下的ChooseImage按钮，调出媒体库并选择适合此页面的背景图像。
点击ChooseImage按钮
像往常一样，测试你的背景图片，并坚持最佳尺寸和最佳做法（大多数情况下都是高分辨率和纵向），然后选择效果良好的图片，单击InsertMedia按钮。
点击InsertMedia按钮
选定的背景图片现在会出现在右侧的Elementor网站预览中。您可能需要调整内容的其他部分，以确保文本和图片等项目显示在背景之上。
Elementor提供了位置、附件、重复和WordPress背景图片大小等图片背景设置。修改这些设置，以确定你的背景作为固定附件、右上角方向或其他尺寸是否会更好看。
点击Update按钮，将所有更改保存到页面并发布网站的新背景。
添加新背景
使用Elementor创建版块背景
Elementor为添加到页面中的大部分版块提供高级背景功能。
您只需在Elementor页面上选择一个版块，然后修改背景设置，即可将背景限制在该区域内。
例如，我们可以选择TextEditor部分来查看文本部分的设置。
使用Elementor选择文本部分
选择Advanced选项卡，然后在该选项卡中找到Background部分。
转到Background部分
Background设置包括BackgroundType,Color,Image等，与我们看到的一般页面背景设置非常相似。唯一不同的是，它将这些设置限制在选定的部分。
为BackgroundType选择画笔图标，然后单击Image字段下的ChooseImage按钮。
单击ChooseImage按钮
从媒体库中选择图片，然后单击InsertMedia按钮。
选择图片并点击插入媒体按钮
如你所见，背景图片将保留在该部分的边界内，同时位于已为该部分创建的内容后面。
使用Position,Attachment,Repeat,和Size选择器来修改背景图片在版块中的显示方式。
最后，单击Update按钮保存更改。
点击更新查看更改
使用BeaverBuilder添加背景图片
BeaverBuilder插件包含一个带有一些基本背景工具的精简版。它是市场上最受欢迎的页面生成器之一，提供许多内容模块，如视频、图片、段落等。
除此之外，它还允许你使用可视化工具和CSS将背景元素放置在整个网站、一个页面或页面上的某个部分，从而实现背景图像、颜色或视频。
BeaverBuilder插件
您必须将以前创建的页面转换为BeaverBuilder格式。或者，您也可以从头开始创建一个页面，然后选择在BeaverBuilder中编辑该页面。
要将当前页面转换为BeaverBuilder格式，请打开该页面编辑器，然后点击右上角的三点图标，打开View菜单。
进入页面设置菜单
向下滚动，找到并选择ConverttoBeaverBuilder链接。
它会尝试编译页面上的所有内容，并将这些元素转换为兼容的BeaverBuilder模块。
点击ConverttoBeaverBuilder链接
要从头开始创建页面，请转到Pages>AddNew。
然后点击LaunchBeaverBuilder按钮。
点击LaunchBeaverBuilder按钮
通过BeaverBuilder添加背景的第一种方法是上传背景到一个部分块。这可能占据页面的大部分，也可能只占页面的一小部分，这取决于你的区块大小。
选中后，找到RowSettings按钮（图标）。
单击该图标即可显示该行的设置。您也可以对节和列以及其他类型的块进行设置。
编辑行设置
网站预览顶部会出现一个设置面板。单击Style选项卡，然后查找Background部分。
在Background下，单击下拉菜单以显示所有背景类型。
您可以考虑几种背景类型，其中一种是照片背景。其他类型包括
为WordPress背景图片设置类型
随意测试不同的背景类型。
例如，您可能会发现Gradient背景比图片更好看。每种背景类型都有自己的设置。在这种情况下，渐变类型需要两种颜色，以便渐变从一种颜色移动到另一种颜色。
关于公司部分
选择照片背景后，会显示从媒体库中选择图片或粘贴图片URL的字段。如果使用媒体库照片源，请单击SelectPhoto链接。
点击SelectPhoto链接
查找您喜欢的背景照片，然后点击SelectPhoto按钮。
选择媒体
BeaverBuilder会将照片放入之前选择的背景空间。在PhotoSettings部分，您需要了解照片的格式。您可以选择Size,Repeat,Position,和Attachment等选项。
全局和整页BeaverBuilder背景图片
BeaverBuilder与默认的WordPress设计工具配合使用，可利用内置的背景功能。
因此，您可以进入外观>背景选项卡，为整个网站激活照片背景。
或者，在BeaverBuilder中打开任何网页，点击左上角的Tools下拉菜单。
在此，单击GlobalSettings选项。
BeaverBuilder的全局设置
全局设置面板可以更改整个网站，覆盖或修改WordPress的内置编码。因此，我们要插入一个CSS代码块来更改整个网站的背景图片（全局）。
单击GlobalSettings中的CSS选项卡，然后将以下代码段粘贴到字段中：
body{background-image:url("URLtoImage");background-repeat:no-repeat;background-position:centertop;background-attachment:fixed;background-size:100%;background-color:#0f1066;}用所需背景照片的URLtoImage的URL。您还可以使用CSS代码更改重复功能、附件和背景大小等内容。
转到CSS选项卡
使用BeaverBuilder制作自定义页面背景更为合理，因为每个页面都有自己的背景图片。
在页面编辑器中，再次打开Tools菜单。
选择LayoutCSS&Javascript选项。
LayoutCSS&JavaScript按钮
将相同的代码粘贴到CSS选项卡中，将URLtoImage文本更改为实际URL，并调整任何设置：
body{background-image:url("URLtoImage");background-repeat:no-repeat;background-position:centertop;background-attachment:fixed;background-size:100%;background-color:#0f1066;}正如你所看到的，整个背景会变成CSS代码中的URL图像。请记住，LayoutCSS/Javascript面板只控制当前页面。除此页面外，你不会在其他页面上看到背景。
添加自定义CSS
通过PageBuilderBySiteOrigin添加简单的行或小工具背景
首先，下载并激活PageBuilderbySiteOrigin插件。
PageBuilderbySiteOrigin插件
导航到一个新页面，或考虑在网站的当前页面上添加SiteOrigin行。
每个SiteOrigin部分都要求您AddWidget或AddRow。如果你不想从头开始设计，也可以浏览预置布局。
好消息是，SiteOrigin中的部件和行都有包含背景图片的设置。
因此，单击AddWidget或AddRow按钮继续。
添加新的部件或行
在本例中，我们将查看Widgets库。
选择Products部件
要为任何SiteOrigin项目添加背景，请滚动该元素并点击Edit链接。
点击Edit链接
在这个例子中，我选择了Products小工具，但每个小工具都有自己的设置，可以配置它在网站上的外观。
背景工具位于Design下拉菜单下方。点击该链接继续。
WordPress背景图片的Design选项卡
找到BackgroundImage字段，点击SelectImage按钮。
您还可以选择为背景图片粘贴ExternalURL。
选择背景图片和颜色
点击Done按钮
现在，BackgroundImage栏会显示该照片的缩略图。
向下滚动设置，配置从BackgroundImageDisplay到覆盖文字的FontColor的所有设置。
一般来说，选择Cover显示应该可以获得理想的效果。SiteOrigin插件的默认设置似乎是平铺显示，所以你可能需要更改。
完成背景的自定义设置后，请务必点击Done按钮。
WordPress的BackgroundImage设置
您必须点击预览或更新按钮，然后浏览页面的前端才能看到结果。
转到“产品”部分
目前我添加的背景图片出现在之前的Products部件的限制范围内。这个背景显然还需要一些编辑才能看起来更漂亮，但这是一个优质的开端，可以用一个看起来更有创意的背景图片来归档空间。
该部分的背景
使用Brizy添加独特的背景图片
本次演示的最后一款页面生成器Brizy提供了时尚的模板和卓越的前端界面，可用于添加不同寻常的设计和快速定制。
因此，您会很高兴听到Brizy还为您通过页面生成器添加的几乎所有元素提供了背景工具。更不用说，Brizy还有几种独特的背景样式，比如在背景中添加循环视频或完整地图。
Brizy页面生成器插件
你会看到一个EditWithBrizy按钮。点击该按钮即可进入完整的Brizy页面生成器。
点击ContinuetoeditwithBrizy按钮
Brizy页面生成器会显示网站的完整预览，包括按钮、文本和图像。如果页面是空白的，请点击StartBuildingYourPage按钮。
点击加号图标开始创建页面
在上部菜单栏中查找LayoutsandBlocks选项卡。
布局提供预建网页，其中包含演示内容，只需自定义公司内容即可使用。区块是较小的网页块，但它们仍然是预建的，通常比你自己制作一个区块更容易使用和操作。
无论你选择哪个方向都没有关系。浏览布局和区块，在页面中添加你想要的元素。这些都是你用来组成一个完整网页的元素。
布局和区块部分
当你在网页上制作了一些区块或布局后，回到编辑器屏幕查看你的作品。
你会发现每个区块的右上方都有一个Settings图标。
点击你所选区块的设置图标。我们将为该图块添加背景。
点击Settings图标
区块设置面板保留在右上角。滚动菜单图标，查看它们的作用。
其中一个是Colors，指的是背景颜色。如果你更希望使用纯色或渐变色背景视图，可以更改并添加渐变色。
背景的Color按钮
左边的图标按钮包含Background设置。
点击该按钮可打开快速工具，为该图块上传背景图片。
WordPress背景图片按钮
Brizy提供三种媒体背景项目：
首先，试用图片类型，了解它如何与您当前的布局配合使用。
点击图片上传区域，在媒体库中找到一张照片并将其添加到背景中。
WordPress背景图片类型
我们为本教程找到了一张木板照片，并表示我们希望没有视差效果。
这样就增加了一种令人愉悦的效果，因为彩色背景起到了叠加的作用，但我们仍然可以看到背后的木质纹理。
记住，你可以随时调整视差字段，使背景图片成为固定、动画或滚动背景。
无视差背景图片
这就是使用Brizy插入背景图片的方法！
Brizy最棒的地方在于，你可以在设计中不断移动，点击每个部分的Settings按钮。
添加另一张背景图片
为了展示其他背景类型的强大功能，我们可以点击地图背景类型，输入一个地址，然后在前景内容后面就会出现该地点的地图。
将地图添加为WordPress背景图片
WordPress背景图片的URL
下面的动画gif给出了视频操作的一个简短示例，尽管它可能需要一些编辑。
视频背景
如果不打算自己拍照，找到合适的地方购买或借用WordPress背景图片也很重要。
总之，我们建议您尝试自己拍摄背景图片。如果不可能，或者您没有摄影或平面设计经验，可以考虑使用免费的图片库资源。您也可以选择从许多优质图片库网站付费购买背景图片，其中有些网站会收取月费，让您下载大量照片。
这些链接中的一些亮点包括：
我们已经了解到，您可以使用标准的WordPress内置工具或插件添加WordPress背景图片。选择哪种方式并不重要，只要能得到想要的结果就行。您还可以选择使用自定义CSS来调整背景图片的样式，或者将其添加到您的网站中。
所有WordPress网站都具有添加背景的功能。但这并不意味着所有网站都能使用这一核心功能。例如，你可能会发现你使用的主题不支持自定义背景。又或者，你一直在上传背景，但它看起来不太合适（太大或太模糊）。
在WordPress中遇到背景问题令人沮丧，不幸的是，这种情况也很常见。我们汇编了以下一些最常见的背景图片问题，并列出了每种解决方法。
主题开发人员可以控制WordPress中的自定义背景功能。他们可以打开或关闭该功能，这取决于他们是否希望启用自定义背景支持。如果不需要，或者与主题的整体设计相冲突，背景就会被关闭。
如果你发现自己的主题不支持自定义背景，或者在添加背景时限制了你的能力，请考虑以下解决方案：
虽然可以使用自己的自定义编码或在主题文件中重新设置自定义背景，但我们通常建议不要使用这两种方法。最好的办法是找到一个支持背景的主题，或者添加一个允许背景但不会对主题功能造成太大影响的插件。
背景图片变暗可能源于背景图片本身的许多设置。大多数情况下，这与叠加滤镜或背景颜色不合适有关。
对于大多数背景变色的情况，你必须检查控制背景本身的主题或插件。
查找背景栏附近是否有要求滤镜或叠加的设置。您还可能会发现一个不透明功能，应清除该功能，这样背景才能正常显示。
背景图片显示在错误的位置往往会影响网站的整体设计。你可能会发现背景过于偏左或偏右，或者本应是背景的中心焦点根本没有出现在屏幕上。
幸运的是，移动背景只需点击几下按钮。
进入WordPress仪表板中的外观>背景。找到当前作为背景上传的图片，然后查找Position字段。这个字段可以让你移动背景的位置，有向左、向右、向顶、向底或向角移动的选项。
我们建议点击所有定位按钮来查看它们产生的结果。找到合适的位置后，保存页面。
纹理和纯色背景在重复显示时通常会更好看，因为它们会忽略图像的断点。然而，许多图片在重复作为背景时看起来很糟糕，尤其是那些有大量细节和不同颜色的图片。
如果您的源图片不够大，无法覆盖整个背景而又不显得拉伸，重复背景图片布局就会派上用场。因此，WordPress有时会默认使用重复布局来保持图片的分辨率。
这个问题的主要解决方案位于WordPress中的外观>背景的背景部分。在上传照片作为背景时，可以尝试使用FillScreen,FitToScreen,或Custom等预设，而不要使用Repeat预设选项。
不过，你可能会发现，试图让一张较小的图片覆盖整个背景屏幕会导致不愉快的结果。在这种情况下，最好的解决办法是完全替换背景源图片，并寻找一张大尺寸、高分辨率且可发布到网络上的图片。
背景图片被拉伸意味着您的自定义背景设置试图使用较小的图片，并用图片覆盖整个屏幕。
还有一个问题是背景设置可能有误。检查一下背景图片的位置，以及在FillScreen模式下被拉伸到画布上的情况。你可能只需要坚持使用原始尺寸或添加Repeat函数就能解决所有问题。
如果您想进一步编辑背景图片，对视频背景感兴趣，或者想使用工具制作特定页面的背景，您可以考虑使用以下WordPress背景图片插件：
SimpleFullScreenBackgroundImage插件
仅此而已！
该插件还有一个高级版本，提供更好的缩放功能，支持无限数量的背景和独特的效果，还有更多。
该插件还支持视频。视频背景可以从YouTube和Vimeo等网站提取，您也可以自行托管。
还可以使用纯色或纹理背景。所有这些背景类型都具有基本WordPress背景工具所不具备的高级功能。其中包括滚动和缩放效果、不透明度效果和自定义速度选项。
它支持Gutenberg，可以与标准WordPress编辑器和许多其他可视化页面构建工具配合使用。最后，您还可以使用自定义CSS选项为您的背景添加更多风格。
PerfectImages+Retina插件
如果您选择高级版本，该插件还提供背景功能。它会为背景图片生成视网膜等效图像，这样即使在高分辨率显示器上，图像也能呈现出应有的效果。
带WordPress背景图片的Maintenance插件
除了标准的WordPress背景，您还可以使用自定义CSS代码、插件和页面生成器在WordPress网站上实现各种背景。从特定页面的图片背景到菜单按钮的背景，各种可能性不一而足。