17713433920 info@mac163.com

是否要向您的WordPress网站添加背景图片?

背景图像可用于使您的网站看起来更具吸引力和美观。

在本文中,我们将向您展示如何轻松地将背景图像添加到WordPress网站。

如何在wordpress中添加背景图片
如何在wordpress中添加背景图片

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

流行的WordPress主题来与自定义背景的支持。此功能使您可以轻松地为WordPress网站设置背景图片。

如果您的主题支持自定义背景功能,那么我们建议使用此方法将背景图像添加到WordPress网站。

但是,如果您的主题不支持此功能,或者您不喜欢主题如何实现背景图像,则可以尝试本教程中提到的其他选项。

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

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

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

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

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

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

在图像下方,您还将能够看到背景图像选项。在“预设”下,您可以选择背景图像的显示方式:填充屏幕,适合屏幕,重复或自定义。

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

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

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

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

这种方法更加灵活。它可与任何WordPress主题配合使用,并允许您设置多个背景图像。

您还可以为WordPress网站的任何帖子,页面,类别或任何其他部分设置不同的背景。

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

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

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

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

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

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

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

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

最后,您需要选择要将此图像用作背景页面的位置。

全屏背景专业版允许您将图像设置为全局背景,也可以从网站的不同部分中进行选择,例如类别,档案,首页或博客页面。

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

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

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

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

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

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

帖子,页面和类别的背景图片

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

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

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

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

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

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

方法3:使用CSS Hero添加背景图像

CSS Hero是WordPress插件,可让您无需更改任何代码即可对主题进行任何更改。

您可以通过几个简单的步骤快速添加背景图像。首先,您需要安装并激活CSS Hero。完成此操作后,就该开始自定义您的网站了。

现在,在浏览器中打开您的主页。您将在管理栏中看到“使用CS SHero进行自定义”链接。

单击该链接后,您会看到CSS Hero选项打开。将鼠标悬停在要添加图像的区域上。

在下面的屏幕截图中,您将看到.header-filter-gradient区域。当您单击该区域时,可以在左侧边栏中选择背景链接。

后台链接将打开。从那里,您可以单击“图像”。现在,您可以从Unsplash或上传的图片中选择一张图片来创建背景。

当您单击所需的图像时,您将看到“应用图像”按钮。然后,您可以选择想要图像的大小。我们选择了较大的版本,因此它会延伸到整个页面。

点击底部的“保存并发布”,背景图片现在已保存为您的网站。

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

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

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

<body class="archive category category-tv category-4">

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

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

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

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

不要忘记用您自己的类别替换背景图片URL和类别类。

您还可以将自定义背景添加到各个帖子和页面。WordPress在body标签中添加了带有帖子或页面ID的CSS类。您可以使用相同的CSS代码,只需将.category-tv替换为特定于帖子的CSS类。


微信二维码

微信扫描二维码联系我们!
我们在微信上24小时期待你的声音
提供外贸路由器设备产品,轻松翻墙,解答:WP主题推荐,WP网站建设,Google SEO,百度SEO,专业服务器环境搭建等!


需要提供WordPress主题/插件的汉化服务可以随时联系我们!另外成品WordPress网站以及半成品WordPress网站建设,海外Google SEO优化托管服务,百度SEO优化托管服务,Centos/Debian服务器WP专用环境搭建,WP缓存服务器搭建,我们都是你的首选,拥有多年WP开源程序服务经验,我们一直在坚持客户体验,没有最好,只有更好!
回到顶部