如何在WordPress中添加背景图片

2020-07-22
WordPress行业动态

是否要向您的WordPress网站添加背景图片？背景图像可用于使您的网站看起来更具吸引力和美观。在本文中，我们将向您展示如何轻松地将背景图像添加到WordPress网站。

方法1.使用您的WordPress主题设置添加背景图像

大多数免费和高级WordPress主题都带有自定义背景支持。此功能使您可以轻松地为WordPress网站设置背景图片。

如果您的主题支持自定义背景功能，那么我们建议使用此方法将背景图像添加到WordPress网站。但是，如果您的主题不支持自定义背景功能，则可以使用本文中的其他方法。

首先，您需要访问WordPress管理员中的外观»自定义页面。这将启动WordPress主题定制器，您可以在其中查看网站的实时预览时更改不同的主题设置。

接下来，您需要点击“背景图片”选项。面板将滑入并显示为您上传或选择网站背景图像的选项。

单击选择图像按钮以继续。

这将弹出WordPress媒体上传器弹出窗口，您可以在其中从计算机上载图像。您也可以从媒体库中选择以前上传的图像。

接下来，您需要在上传或选择要用作背景的图像后单击选择图像按钮。

这将关闭媒体上载器弹出窗口，并且您将在主题定制器中看到所选图像的预览。

在图像下方，您还可以看到背景图像选项。在预设下，您可以选择背景图像的显示方式：填充屏幕，适合屏幕，重复或自定义。

您还可以通过单击下面的箭头来选择背景图像的位置。单击中心将使图像与屏幕中心对齐。

不要忘记单击顶部的“保存并发布”按钮以存储您的设置。就是这样，您已经成功将背景图像添加到WordPress网站。

继续并访问您的网站以查看实际效果。

方法2。使用插件在WordPress中添加自定义背景图像

这种方法更加灵活。它可与任何WordPress主题配合使用，并允许您设置多个背景图像。您还可以为WordPress网站的任何帖子，页面，类别或任何其他部分设置不同的背景。

它会自动使您的所有背景图像全屏显示并响应移动设备。这意味着您的背景图片会在较小的设备上自动调整其大小。

首先，您需要安装并激活Full Screen Background Pro插件。有关更多详细信息，请参阅有关如何安装WordPress插件的分步指南。

激活后，您需要访问外观»全屏BG图像页面来配置插件设置。

系统将要求您添加许可证密钥。您可以从购买插件后收到的电子邮件中或从插件网站上的帐户中获取此信息。

接下来，您需要单击保存设置按钮来存储您的更改。现在您可以开始向您的WordPress网站添加背景图像了。

继续，然后在插件的设置页面上单击“添加新图像”按钮。这将带您到背景图像上传屏幕。

单击选择图像按钮以上传或选择图像。选择图像后，您将能够在屏幕上实时查看图像。

接下来，您需要为此图像提供一个名称。该名称将在内部使用，因此您可以在此处使用任何名称。

最后，您需要选择要将此图像用作背景页面的位置。全屏Background Pro允许您将图像全局设置为背景，也可以从网站的不同部分中进行选择，例如类别，档案，首页，博客页面等。

不要忘记单击“保存图像”按钮来保存背景图像。

您可以通过访问外观»全屏BG图像页面添加任意数量的图像。

如果您设置了一个以上要在全局使用的图像，则该插件将自动开始以幻灯片形式显示背景图像。

您可以调整图像淡出所需的时间以及新背景图像开始淡入所需的时间。

您在此处输入的时间以毫秒为单位。如果要让背景图像在20秒后消失，则需要输入20000。

不要忘记单击“保存设置”按钮来存储您的更改。

为单个帖子，页面，类别等设置背景图像

全屏背景专业版还允许您设置单个帖子，页面，类别，标签等的背景图像。

只需在要显示其他背景图像的位置编辑帖子/页面。在帖子编辑屏幕上，您会注意到帖子编辑器下方的新“全屏背景图像”框。

要将背景图像用于特定类别，您需要访问外观»全屏BG图像页面，然后单击“添加新图像”按钮。

上传图像后，您可以选择“类别”作为要显示背景图像的上下文。

现在进入特定类别ID或塞在那里你要显示的图像。请参阅我们的指南，了解如何在WordPress中查找类别ID。

不要忘记保存图像以存储设置。

方法3.使用CSS在WordPress中的任何位置添加自定义背景图像

默认情况下，WordPress在整个WordPress网站中将多个CSS类添加到不同的HTML元素中。您可以使用这些WordPress生成的CSS类轻松地将自定义背景图像添加到各个帖子，类别，作者和其他页面。

例如，如果您的网站上有一个名为TV的类别，那么当有人查看TV类别页面时，WordPress会自动将这些CSS类添加到body标签中。

<bodyclass="archive category category-tv category-4">

您可以使用检查工具来确切查看WordPress将哪些CSS类添加到了body标签。

您可以使用CSS类category-tv或category-4CSS类为该类别页面设置不同的样式。

让我们将自定义背景图像添加到类别存档页面。您将需要将此自定义CSS添加到主题。

body.category-tv{ background-image: url("http://example.com/wp-content/uploads/2017/03/your-background-image.jpg"); background-position: centercenter; background-size: cover; background-repeat: no-repeat; background-attachment: fixed;}