如何在WordPress中添加背景圖片


您要向您的WordPress網站添加背景圖片嗎?

背景圖像可用於使您的網站看起來更具吸引力和美觀。

在本文中,我們將向您展示如何輕鬆地將背景圖像添加到WordPress網站。

如何在WordPress中添加背景圖片

影片教學

訂閱WPBeginner

如果您希望書面說明,請繼續閱讀。

方法1.使用您的WordPress主題設置添加背景圖像

最受歡迎的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的背景圖片

單擊該鏈接後,您會看到CSS Hero選項打開。 將鼠標懸停在要添加圖像的區域上。

在下面的屏幕截圖中,您將看到 .header-filter-gradient 區。 單擊此區域後,您可以在左側邊欄中選擇背景鏈接。

WordPress背景圖片選擇器

後台鏈接將打開。 從那裡,您可以單擊“圖像”。 現在,您可以從Unsplash或上傳的圖片中選擇一張圖片來創建背景。

使用CSS Her將圖片添加到背景

當您單擊所需的圖像時,您將看到“應用圖像”按鈕。 然後,您可以選擇想要圖像的大小。 我們選擇了較大的版本,因此它會延伸到整個頁面。

點擊底部的“保存並發布”,背景圖片即已保存到您的網站。

自定義背景WordPress圖片

方法4.使用CSS代碼在WordPress中的任何位置添加自定義背景圖像

默認情況下,WordPress在整個WordPress網站中將多個CSS類添加到不同的HTML元素中。 您可以使用這些WordPress生成的CSS類輕鬆地將自定義背景圖像添加到各個帖子,類別,作者和其他頁面。

例如,如果您的網站上有一個名為TV的類別,那麼當有人查看TV類別頁面時,WordPress會自動將這些CSS類添加到body標籤中。

 

您可以使用檢查工具來準確查看WordPress將哪些CSS類添加到了body標籤。

使用檢查工具查看WordPress添加的類

您可以使用 category-tv 要么 category-4 CSS類僅對此類別頁面進行樣式設置。

讓我們將自定義背景圖像添加到類別存檔頁面。 您將需要將此自定義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;
}

不要忘記用自己的類別替換背景圖片網址和類別類。

您還可以將自定義背景添加到各個帖子和頁面。 WordPress在body標籤中添加了帶有帖子或頁面ID的CSS類。 您可以使用相同的CSS代碼,只需將.category-tv替換為特定於帖子的CSS類。

我們希望本文能幫助您學習如何在WordPress中添加背景圖片。 您可能還需要查看我們對WordPress最佳拖放頁面構建器插件的比較,以及有關如何創建自定義WordPress主題的教程(無任何代碼)。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。