wordpress 背景

Do you want to add a background image to your WordPress site?

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

Background images can be used to make your website look more engaging and aesthetically pleasant.

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

In this article, we will show you how to easily add a background image to your WordPress site.

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

影片教学 (Video Tutorial)

演示地址

If you’d prefer written instructions, then please continue reading.

如果您希望书面说明，请继续阅读。

方法1.使用您的WordPress主题设置添加背景图像 (Method 1. Add a Background Image Using Your WordPress Theme Settings)

Most popular WordPress themes come with custom background support. This feature allows you to easily set a background image to your WordPress site.

最受欢迎的WordPress主题带有自定义背景支持。 此功能使您可以轻松地为WordPress网站设置背景图片。

If your theme supports the custom background feature, then we recommend using this method to add a background image to your WordPress site.

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

However, if your theme doesn’t support this feature, or you don’t like how it implements background images, then you can try the other options mentioned in our tutorial.

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

First you need to visit the Appearance » Customize page in your WordPress admin. This will launch the WordPress theme customizer where you can change different theme settings while viewing a live preview of your website.

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

Next, you need to click on the ‘Background image’ option. The panel will slide in and show you the options to upload or select a background image for your website.

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

Click on the select image button to continue.

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

This will bring up the WordPress media uploader pop-up where you can upload an image from your computer. You can also select a previously uploaded image from the media library.

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

Next, you need to click on the choose image button after uploading or selecting the image you want to use as background.

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

This will close the media uploader pop-up, and you will see your selected image’s preview in the theme customizer.

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

Below the image, you will also be able to see the background image options. Under ‘Preset,’ you can select how you want the background image to be displayed: fill screen, fit screen, repeat, or custom.

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

You can also select the background image position by clicking on the arrows below. Clicking on center will align the image to the center of the screen.

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

Don’t forget to click on the ‘Save & Publish’ button at the top to store your settings. That’s all, you have successfully added a background image to your WordPress site.

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

Go ahead and visit your website to see it in action.

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

方法2.使用插件在WordPress中添加自定义背景图片 (Method 2. Add a Custom Background Image in WordPress Using a Plugin)

This method is a lot more flexible. It works with any WordPress theme and allows you to set multiple background images.

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

You can also set different backgrounds for any post, page, category, or any other section of your WordPress site.

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

It automatically makes all your background images full-screen and mobile-responsive. This means your background image will automatically resize itself on smaller devices.

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

First, you need to install and activate the Full Screen Background Pro plugin. For more details, see our step by step guide on how to install a WordPress plugin.

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

Upon activation, you need to visit Appearance » Full Screen BG Image to configure the plugin settings.

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

You will be asked to add your license key. You can get this information from the email you received after buying the plugin or from your account on the plugin’s website.

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

Next, you need to click on the ‘Save Settings’ button to store your changes. You are now ready to start adding background images to your WordPress site.

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

Go ahead and click on the ‘Add New Image’ button on the plugin’s settings page. This will take you to the background image upload screen.

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

Click on the ‘Choose Image’ button to upload or select an image. As soon as you select the image, you will be able to see a live preview of the image on your screen.

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

Next, you need to provide a name for this image. This name will be used internally, so you can use anything here.

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

Finally, you need to select where you want this image to be used as the background page.

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

Full Screen Background Pro allows you to set images as a global background, or you can choose from different sections of your website like categories, archives, front or blog page.

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

Don’t forget to click on the save image button to save your background image.

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

You can add as many images as you want by visiting the Appearance » Full Screen BG Image page.

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

If you set more than one image to be used globally, then the plugin will automatically start displaying background images as a slideshow.

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

You can adjust the time it takes for an image to fade out and the time after which a new background image starts to fade in.

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

The time you enter here is in milliseconds. If you want a background image to fade out after 20 seconds, then you will need to enter 20000.

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

Don’t forget to click on the save settings button to store your changes.

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

帖子，页面和类别的背景图片 (Background Images for Posts, Pages, and Categories)

Full Screen Background Pro also allows you to set background images for single posts, pages, categories, tags, and more.

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

Just edit the post/page where you want to display a different background image. On the post edit screen, you will notice the new ‘Full Screen Background Image’ box below the post editor.

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

To use a background image for a specific category, you need to visit the Appearance » Full Screen BG Image page and then click on the ‘Add New Image’ button.

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

After uploading your image, you can select ‘Category’ as the context where you want to display the background image.

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

Now enter the specific category ID or slug where you want to display the image. See our guide on how to find category ID in WordPress.

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

Don’t forget to save your image to store your settings.

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

方法3：使用CSS Hero添加背景图像 (Method 3. Add Background Images using CSS Hero)

CSS Hero is a WordPress plugin that allows you to make any changes to your theme without touching a single line of code.

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

You can add background images quickly in a few simple steps. First, you need to install and activate CSS Hero. Once you’ve done that, it’s time to start customizing your website.

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

Now open up your homepage in your browser. You’ll see the ‘Customize with CS SHero’ link in your admin bar.

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

After you click that link, you’ll see the CSS Hero options open up. Hover your mouse over the area you want to add an image to.

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

In the screenshot below, you’ll see .header-filter-gradient area. When you click this area, you can then choose the background link in the left sidebar.

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

The background link will open. From there, you can click on ‘Image.’ Now, you can choose an image from Unsplash or from your uploads to create your background.

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

When you click on the image you want, you’ll see the ‘Apply Image’ button. Then you can choose what size you want your image to be. We chose the large version so it would stretch across the page.

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

Hit ‘Save and Publish’ at the bottom, and the background image is now saved for your site.

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

方法4.使用CSS代码在WordPress中的任何位置添加自定义背景图像 (Method 4. Add Custom Background Images Anywhere in WordPress Using CSS Code)

By default, WordPress adds several CSS classes to different HTML elements throughout your WordPress site. You can easily add custom background images to individual posts, categories, author, and other pages using these WordPress generated CSS classes.

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

For example, If you have a category on your website called TV, then WordPress will automatically add these CSS classes to the body tag when someone views the TV category page.

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

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

You can use the inspect tool to see exactly which CSS classes are added by WordPress to the body tag.

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

You can use either category-tv or category-4 CSS class to style just this category page differently.

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

Let’s add a custom background image to a category archive page. You will need to add this custom CSS to your theme.

让我们将自定义背景图像添加到类别存档页面。 您将需要将此自定义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;}

Don’t forget to replace background image URL and the category class with your own category.

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

You can also add custom backgrounds to individual posts and pages. WordPress adds a CSS class with the post or page ID in the body tag. You can use the same CSS code just replace .category-tv with the post specific CSS class.

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

We hope this article helped you learn how to add a background image in WordPress. You may also want to see our comparison of the best drag & drop page builder plugins for WordPress, and our tutorial on how to create a custom WordPress theme (without any code).

我们希望本文能帮助您学习如何在WordPress中添加背景图片。 您可能还需要查看我们对WordPress 最佳拖放页面构建器插件的比较，以及有关如何创建自定义WordPress主题 (无任何代码)的教程。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

如果您喜欢这篇文章，请订阅我们的YouTube频道 WordPress视频教程。 您也可以在Twitter和Facebook上找到我们。

翻译自: https://www.wpbeginner.com/beginners-guide/how-to-add-a-background-image-in-wordpress/

wordpress 背景