如何新增、編輯和自定義WordPress主題背景圖片

WordPress 背景圖片有各種形式。您可以為整個網站上傳背景圖片，也可以將其放在按鈕後面，或者為登入頁面設定純色背景。無論您想把它們放在哪裡，瞭解上傳圖片（包括背景圖片）的基本知識都是至關重要的。

本文將解釋什麼是背景圖片，以及如何編輯背景圖片以獲得更好的效果。我們還將介紹如何在網站上快速啟用背景圖片，並解決途中可能出現的任何問題。

什麼是 WordPress 背景圖片？

WordPress 背景圖片是網站的完整背景。它也被稱為自定義背景。

WordPress 背景圖片示例

背景也可以是純色。

無論您選擇哪種方式，在 WordPress 主題中，functions.php 檔案都會處理背景圖片。WordPress 的 header.php 檔案也會顯示背景圖片。

因此，主題開發人員可以更好地控制是否為 WordPress 主題啟用自定義背景功能。您仍然可以開啟或關閉該功能，但您網站的主題通常會決定預設設定。

您可以在 WordPress 上實現多種型別的背景。您可以選擇標準的全站背景，也可以選擇位於側邊欄和文章等特定元素後面的背景。

也可以為 WordPress 網站上的特定位置定製背景：

• WordPress 頁面或文章後面
• WordPress 分類頁面
• 頁面或文章的內容塊內部
• 登入頁面
• 導航選單後面
• 維護或即將釋出頁面上

總的來說，如果在主題中啟用了自定義背景支援，使用者就可以上傳圖片或選擇顏色來填充整個網站背景。

設定位於 WordPress 儀表板的外觀 > 自定義 > 背景圖片下。不過，也可以通過拖放頁面生成器、外掛和其他不同選項來實現其他型別的背景。

將背景圖片上傳到儀表板只是整個過程的一部分。之後，你需要配置背景圖片設定。有時您可以保持設定原樣，而有時則需要重新配置，以確保圖片看起來非常出色。

WordPress 背景圖片的設定包括

• 背景顏色
• 大小
• 圖片位置
• 圖片是否重複
• 填充螢幕或拉伸圖片的選項

我們將首先介紹使用 WordPress 背景圖片的最佳實踐。然後，我們將介紹如何在各種情況下設定 WordPress 背景圖片。

背景的多種樣式

WordPress 背景的真正優勢在於它們並非都是靜態影象。您可能會遇到各種型別的背景，從視訊、照片圖案到幻燈片，不一而足。

背景圖片示例

您通常可以藉助自定義 CSS 或外掛（或兩者兼而有之）來實現獨特的背景。本文將向你展示這兩種方法。

以下是一些值得考慮的背景樣式：

• 標準背景圖片：這是一種靜態影象（PNG、JPG 和其他影象格式），可覆蓋大部分網站空間，位於主要內容之後。它們的優點包括簡潔、可選高解析度照片以及 WordPress 核心的預設支援。缺點是容易影響前景元素的可見度，而且大尺寸、高解析度的圖片會降低網站速度。
• 純色背景：當你想為網站增添一些活力，但又沒有適合你的品牌或看起來不錯的圖片作為背景時，純色背景圖片就派上用場了。彩色背景還能呈現出更簡潔、更專業的形象，而且實施起來也不費時。無需自定義程式碼或外掛，它們就能很好地匹配你的品牌。
• 漸變背景：漸變背景會從一種顏色過渡到另一種顏色。它比純色更有視覺吸引力，新增起來也不費時間，而且你可以用很多外掛來新增。主要缺點是，前景可能在漸變的一端顯示得很好，但在另一端卻顯示不出來。
• 圖案或紋理背景：所有圖案和紋理背景都是照片，但它們的重點是影象中的重複專案或特寫紋理，如一塊木板或一片草地。圖案或紋理的好處在於，它作為背景的效果非常好，因為你可以將其拉伸，而且大多數人都不會注意到，當圖片不夠大時，圖案會出現斷裂。
• 圖片幻燈片背景：圖片幻燈片背景使網站所有者能夠在背景中分享多種型別的設計或照片，從而在客戶滾動瀏覽網站時調整情緒。不過，幻燈片可能會分散注意力或降低網站速度。
• 視訊背景：視訊背景引人入勝，觀看起來很有趣，而且很容易描繪出您的品牌性質。但是，如果操作不當，它們也會導致效能問題，並可能奪走銷售漏斗的注意力。此外，背景視訊的尺寸和播放時間必須恰到好處。除非您選擇免費的視訊素材，否則背景視訊的製作成本也會很高。

使用 WordPress 背景圖片的最佳實踐

設定自定義背景圖片似乎很容易。只需將圖片上傳到正確的位置，然後看著它出現在前端，對嗎？

大多數情況下是這樣，但有時你會發現背景圖片可能有點麻煩。因此，我們建議您遵循 WordPress 背景圖片的最佳實踐，儘可能消除問題。

堅持使用高質量圖片

背景圖片的解析度往往會影響圖片的呈現效果。您可能認為您用智慧手機拍攝的圖片非常適合作為背景圖片，但實際上它可能需要更高的質量。

Unsplash 上的免費圖片庫

您可以從 Shutterstock 等網站付費購買免版稅圖片。這些網站通常都有專業級的圖片，這些圖片都經過預處理，可以作為大型背景圖片上傳。你也可以在免費圖片庫網站上找到很多這樣的圖片。

背景圖片可能不會完整地顯示在網站上，因為大部分都被內容覆蓋了。不過，實際圖片還是會顯示在整個螢幕上。

如果不使用高質量的圖片，就有可能出現背景拉伸的情況。

確保背景圖片大小合適

除了影象解析度，影象的物理尺寸也很重要。

所有螢幕的長寬比都各不相同。而移動裝置讓情況變得更加複雜。但我們的目標是在最大的螢幕上使用看起來很棒的圖片。否則，就有可能再次出現圖片被拉長或無法正常顯示的情況。

一般來說，WordPress 背景圖片的最小尺寸為 1024 x 768 畫素，這是個不錯的原則。不過，也有專家建議使用 1920 x 1080 畫素這樣的尺寸。總的來說，您最好將寬度保持在 1000 到 3000 畫素之間，具體取決於顯示的位置。

WordPress 背景圖片尺寸

下一個需要考慮的因素是寬高比。背景圖片是覆蓋整個網站，還是隻覆蓋頂部的四分之一？

從技術上講，網站的縱橫比是縱向的（高度長於寬度）。因此你可以考慮這類圖片。但是，部分背景（如標題或橫幅廣告的背景）應保持橫向格式（寬度長於高度）。

此外，目前桌上型電腦最常見的寬高比是 16:9。保持這一目標有助於實現。響應式主題或外掛可自動調整背景圖片，以適應移動瀏覽。

最終，在實際網站和多種裝置型別上測試背景圖片會讓最終決定變得更容易。

製作 WordPress 背景圖片前進行優化

與上傳到 WordPress 的所有圖片一樣，如果您不在釋出到網際網路之前對其進行優化，那將是對自己的一種傷害。這一點對於背景圖片尤為重要，因為它們通常會出現在整個網站的多個頁面上。此外，它們都是大尺寸照片，在螢幕上佔據了相當大的空間。

較大的圖片會對伺服器造成很大的壓力。請保持圖片的解析度，但優化圖片大小，以便網站快速載入。

優化圖片有兩種選擇：

• 在上傳到 WordPress 之前優化背景圖片（以及所有網站圖片）。藉助 Photoshop Express、GIMP 和 Pixlr 等工具完成這一手動過程。
• 安裝 WordPress 外掛，在上傳照片時調整大小並縮小尺寸，從而自動完成優化過程。

閱讀我們的深入圖片優化指南，瞭解如何優化圖片以提高網頁效能。

安裝主題前檢查背景是否支援

遺憾的是，並非所有主題都支援自定義背景圖片。這通常是因為背景不符合主題的整體設計，所以開發者選擇將其完全關閉。

不過，如果你真的想要在網站上新增背景，那麼在下載新主題時，尤其是打算付費購買高階主題時，最好檢視一下功能列表。許多主題銷售網站都會提供主題是否支援背景的資訊。

例如，WordPress 主題庫中列出的主題會將支援自定義背景作為標籤。您也可以在主題描述中找到有關自定義背景的參考資訊。

主題的自定義背景支援

其他主題網站通常會包含類似的自定義背景圖片資訊。如果沒有，請聯絡開發人員，瞭解是否有可能以任何方式實現，以及覆蓋背景圖片塊（如下文所述）是否會導致主題出現任何問題。

考慮使用視覺化頁面生成器，讓背景圖片變得更簡單

Gutenberg、WPBakery、Divi 和 Elementor 等頁面生成器提供了一系列令人印象深刻的區塊和模組，可以在網頁的任何位置插入圖片和文字框等元素。

Elementor website builder

如果沒有拖放生成器，配置背景圖片就會變得比較困難。要解決可能遇到的任何問題尤其困難。

頁面生成器還往往會取代 WordPress 提供的預設背景圖片功能。你可以在程式碼中覆蓋主題限制或任何有助於顯示背景圖片的缺失元素。

確保背景圖片合法

談到圖片，尤其是在網際網路上釋出的圖片，總會涉及到合法性問題。在社交媒體上有一種日益增長的趨勢，人們似乎認為在照片上新增信用就可以自動使用該照片。

這是錯誤的。

照片的所有權歸誰所有？即使該照片來自 iPhone 的快速抓拍，在美國和許多其他國家，他們也立即擁有該照片的版權保護。

如果你想獲得使用他人照片的合法權利，需要版權持有者出具書面宣告，允許你使用他們的圖片–一封簡單的電子郵件就可以。即便如此，如果對方要求你註明照片的出處，你也必須註明。

我們有一份關於保護網站圖片的綜合指南，但這篇文章也為那些有興趣使用其他來源照片的人概述了有價值的資訊。

背景圖片的難處在於，由於 WordPress 無法為背景圖片新增可見的標題，因此通常無法新增屬性。而且，你也不能隨便在一篇博文或一個頁面上新增署名，並指望以此作為整個網站背景圖片的署名。

為了保護自己，也為了尊重照片的拍攝者，在獲取 WordPress 背景圖片時，請考慮以下方法之一：

• 自己拍攝照片。這是確保不侵犯他人版權財產的最簡單方法。
• 在 Shutterstock 和 iStockPhoto 等網站上付費購買照片。這些網站有時價格不菲，但對於一張背景圖片來說，可能剛好能擠進你的預算。
• 可以考慮 Unsplash 或 Pexels 等免費圖片網站。不過，請確保不需要註明出處！您偶爾可以在這些網站上找到建議但不要求署名的圖片。
• 聯絡攝影師或藝術家，詢問是否可以免費使用。這可能就是你所需要的，特別是如果你能提供一些回報的話。
• 考慮跳過背景圖片，或考慮用彩色背景代替照片。

如何在 WordPress 中設定背景圖片？

在 WordPress 中設定背景圖片有多種方法。這些方法通常會根據您想要放置圖片的位置而改變。

例如，您可能希望整個網站的背景圖片保持一致。另一方面，您也可能希望在所有頁面上都顯示獨特的背景圖片。

由於存在如此多的可能性，我們將在以下部分介紹如何新增背景圖片或顏色：

• 整個網站
• 一個 WordPress 頁面
• 一個 WordPress 文章
• 單個內容塊
• WordPress頁首
• 分類存檔頁面
• WordPress 登入頁面
• 導航選單
• 維護頁面

開始之前：啟用 WordPress 上的自定義背景支援（如需要）

主題開發者決定著網站後臺功能的命運。WordPress 的核心中內建了這一功能，但主題開發者可能會將其關閉，從而使你無法在儀表板設定中將其開啟。

如果在下面的教程中，你發現你的主題是導致你缺少自定義背景選項的原因，請考慮以下步驟來快速解決這個問題。

WordPress 的主要自定義背景支援由 functions.php 檔案處理。如果缺少該檔案，請開啟並插入以下程式碼：

$defaults = array(
'default-color'          => '',
'default-image'          => '',
'default-repeat'         => '',
'default-position-x'     => '',
'default-attachment'     => '',
'wp-head-callback'       => '_custom_background_cb',
'admin-head-callback'    => '',
'admin-preview-callback' => ''
);
add_theme_support( 'custom-background', $defaults );

請記住，真正啟用背景支援的元素是 add_theme_support() 函式及其中的所有內容。這段程式碼可以在 WordPress 儀表盤中開啟背景功能，你可以在本文的後續教程中使用它。

還可以通過 functions.php 檔案為整個主題新增預設背景圖片。只需轉到前面程式碼中帶有 default-image 值的區域，然後在 => 後 '' 之間的空白處新增圖片的 URL。

這是在 WordPress 儀表板上開啟自定義背景的快速而簡單的方法。

儘管如此，如果主題本來就不支援背景，我們還是建議更換主題。取消自定義背景功能可能有其自身的目的，也可能是主題開發人員發現它給設計帶來了太多問題。

如何為整個 WordPress 網站新增背景圖片

如果您的主題提供新增自定義背景圖片的功能（許多主題都提供這種功能），您就可以更輕鬆地新增背景圖片了。

首先，進入 WordPress 面板，點選外觀 > 自定義。

點選外觀選單下的“自定義”連結

這將帶你進入 WordPress 主題定製器，左邊是定製設定，右邊是網站預覽。

在這裡，找到並點選“背景”選項卡。

編輯器中的 WordPress 背景圖片

如果您可以選擇外觀 > 背景，則可以更直接地使用該設定。

點選外觀選單下的“背景”連結

背景自定義區域管理整個網站的背景元素。

單擊“選擇圖片”按鈕繼續。

點選‘Select Image’按鈕

在“Select Image”視窗中，選擇一張適合作為品牌和網站風格背景的圖片。一般來說，黑色、白色或灰色的中性色彩模式通常有助於確保大部分文字和內容在背景的襯托下依然美觀。

選擇圖片後，點選 Choose Image 按鈕繼續。

選擇背景圖片

您選擇的背景現在會出現在網站預覽中。

看看所選圖片是否仍能突出您的內容，並使其看起來更美觀。有時，你可能會發現需要完全更換背景或更改文字或連結顏色等。

背景的小縮圖也會顯示在 Settings 面板中，告訴你圖片已被應用。

WordPress 背景圖片縮圖

WordPress 背景圖片還有一些其他設定，包括 Preset 欄位。

點選 Preset 欄位可使用預設設計和對齊方式更改影象格式。

WordPress 背景圖片的“預設”選項

您可以從以下預設中進行選擇：

• Default：這通常與 Repeat 相同，但可能取決於您的主題。預設設定通常效果最好，但也取決於所使用的圖片。
• Fill Screen：此設定會拉伸影象，以確保覆蓋螢幕的所有部分，即使這意味著要裁剪影象，使其溢位螢幕。它對許多高解析度影象效果很好，但對低解析度影象可能會造成模糊。
  Fit to Screen：它保持原始照片的縱橫比，並嘗試使用該比例來適應當前螢幕影象。它能很好地保持影象接近原始狀態，但可能無法覆蓋所有背景區域。
• Repeat：此功能使用了部分 Fill Screen 功能，可擴充套件和拉伸影象，但也會在無法成功覆蓋整個螢幕時重複影象。對於圖案來說，這通常看起來很不錯。但對於某些影象，它可能會在重複影象之間產生一條硬線。
• Custom：這種設定可以讓你對背景進行最大程度的控制，提供多個選項來自定義 WordPress 背景圖片的大小，比如它在頁面上的重複方式、拉伸方式或使用者滾動時的移動方式。

由於圖片的尺寸、解析度和細節各不相同，因此沒有規定哪種預設效果最好。因此，你最好從 Default 預設開始，然後測試其他預設，看看哪個最適合你的背景圖片。

如果其他方法都不奏效，可以使用 Custom 設定來進行更具體的選擇。

用於 WordPress 背景圖片的 Fill Screen 預設

Fit to Screen 預設並不能完全滿足這張圖片的要求，主要是因為原始圖片的長度遠大於寬度，在右側留下了大量空間。我可以將 Image Position 改為 Center，但這樣很可能會在兩側留下空白。

Fit to Screen 預設

下一個需要考慮的設定是 Image Position 工具。點選箭頭可移動背景圖片，調整方向，使影象焦點朝向中心或填滿螢幕。

與 Presets 設定一樣， Image Position 工具也需要一個猜測和檢查的過程，因為原始影象及其內容決定了它的外觀。

WordPress 背景圖片位置

接下來，有一個覈取方塊可讓背景圖片 Scroll with Page。

選中該覈取方塊後，背景圖片會緊貼前景內容，並隨著使用者在頁面上的上下移動而滾動。

啟用“隨頁面滾動”選項

取消選中該覈取方塊往往會改變背景圖片的總體方向，但其主要功能是在使用者向下滾動頁面時讓背景保持靜態。

前景內容專案（如本例中的產品）會在背景圖片上滑動，從而產生吸引人的效果。

禁用 Scroll with Page 選項

使用自定義預設

除自定義預設外，選擇其他預設時，沒有太多額外的設定可配置。

不過，選擇 “自定義預設 ”可以開啟其他幾個欄位供您考慮。

例如，你可以選擇 Fill the Screen 或  Fit to Screen，然後將其與重複或不重複的背景圖片相結合，將預設中的元素結合起來。此外，你還可以使用 Scroll With Page 選項。

背景影象的預設和影象大小

看看是否可以使用未經任何編輯或設定的原始影象。有時，原始照片幾乎完全符合用作背景的要求，那麼為什麼要破壞已經準備好的東西呢？

不過，對於你的網站來說，它的尺寸也可能過大，或者長寬比不是很合適。無論如何，我們都建議你嘗試一下這個設定，看看是否適合你。

設定背景圖片大小

一旦決定了完美的背景設定（在本教程中，預設選項看起來不錯），點選 Publish 按鈕即可在網站上顯示更改。

點選發布按鈕

進入網站前端檢視背景效果。

主頁是一個很好的起點。你會發現頁首區域和歡迎影象沒有背景。這是因為網站頂部的歡迎影象已經作為全屏英雄影象覆蓋了整個螢幕的水平部分。

至於頁首和選單，你將在下面的教程中學到如何配置這些背景。

檢視 WordPress 背景圖片

請記住，一般的自定義 WordPress 背景會在網站的每個頁面和文章上啟用。這是一個全域性功能，適合那些想快速打造網站品牌並增加一些亮點的人。

例如，進入本網站的 Shop 頁面，就會看到產品選擇後面的背景。

另一個頁面上的 WordPress 背景圖片

如何為整個網站設定背景色而不是圖片

在整個網站上啟用背景色的過程與開啟背景圖片沒有太大區別。首先進入儀表板中的外觀 > 背景，然後查詢背景顏色欄位。

單擊“選擇顏色”按鈕，開啟更多設定，選擇和切換不同的背景顏色。

選擇純色作為背景

顏色面板提供多個選項供你決定顏色。首先是輸入或貼上顏色程式碼。所有顏色都有獨特的顏色程式碼，你可以在網際網路上快速搜尋到這些顏色及其相關程式碼。

另一種方法是點選顏色面板，為背景找到最合適的顏色。如果你想選擇一種簡單的顏色，面板底部甚至還有常用的色塊。

要啟用背景顏色，請確保該顏色已被選中並顯示在 Select Color 預覽中。

選擇背景顏色

您應該能在 WordPress 自定義預覽中看到背景顏色。如果沒有，這很可能意味著你安裝的圖片背景覆蓋了彩色背景。

要顯示彩色背景，只需點選背景圖片預覽下方的移除按鈕。

刪除 WordPress 背景圖片

現在，顏色會出現在整個網站的內容後面。就像使用影象背景一樣，請仔細檢視網站，確保所有文字、影象和連結在新背景下仍然可見。

預覽純橙色 WordPress 背景

如何為 WordPress 頁面新增背景圖片

但是，如果您想在 WordPress 上插入一張圖片，作為單個 WordPress 頁面的背景，該怎麼辦呢？上一節概述了全站背景圖片的全域性設定。

很多人都喜歡在頁面上新增背景，因為這樣可以為頁面融入與內容相關的特定主題或感覺。例如，如果公司位於洛杉磯，那麼“關於我們”頁面就可以使用洛杉磯背景。或者，作者的新書介紹可以使用符合故事主題的背景。

在本節中，我們將介紹如何使用一種主要方法和幾種替代方法為頁面新增 WordPress 背景圖片，如果你不介意花錢購買外掛或選擇頁面生成器的話。

注：使用古騰堡編輯器還是經典 WordPress 編輯器並不重要。

對於特定頁面背景，這些方法似乎最有效：

• 使用自定義 CSS 新增獨特的頁面背景。
• 使用允許單獨頁面背景的外掛。
• 藉助頁面生成器在每個頁面上新增自定義背景。

為頁面新增自定義 CSS 需要在 WordPress 頁面設定的自定義 CSS 模組中找到該頁面的類 ID 並呼叫背景 URL。幸運的是，要找出一個頁面的類 ID 並不難，我們可以查詢它，或者你可能已經知道它是什麼了。

訪問網站上的頁面，只為該頁面新增背景。

新增特定頁面的 WordPress 背景圖片

右鍵單擊頁面上的任意位置，螢幕上會出現一個下拉選單。選擇下拉選單底部的檢查工具。

檢查模組會顯示頁面本身的編碼，以及網站全域性使用的自定義 CSS。這是查詢網站頁面或文章資訊的有用區域。

檢查網頁

檢查框中有網頁的程式碼行，但我們只對分配給這個網頁的類標籤感興趣。說明一下，WordPress 的每個頁面都有一個 class 標籤作為識別碼。

使用搜尋功能，輸入 body 或 class，即可找到帶有 page-id 標籤的程式碼行。

在本例中，ID 是 page-id-352，但你的頁面會有所不同。

你要複製帶有 page-id-# 關鍵字的整段程式碼，包括破折號。

在 WordPress 中查詢頁面 ID

將頁面 ID 儲存在某個地方，以便在接下來的幾個步驟中使用，然後返回 WordPress 面板，點選外觀 > 自定義。

進入主題定製器

在 WordPress 定製器中選擇“額外 CSS”選項卡。

自定義器中的“額外 CSS”部分

該部分允許你輸入或貼上任何自定義 CSS，以便在整個網站中對專案進行操作。在本例中，它可以方便地覆蓋預設背景圖片，併為一個頁面啟用背景圖片，而不是其他頁面。

將以下程式碼貼上到“額外 CSS”欄位中，但切記要將“#”替換為從前面步驟中提取的作為頁面 ID 的實際數字。此外，你還必須輸入一個真正的圖片 URL，以代替我們在這裡輸入的填充文字 ( http://YOURIMAGEURL.jpeg )。

body.page-id-# { 
background-image: url("http://YOURIMAGEURL.jpeg"); 
background-position: center center; 
background-size: cover; 
background-repeat: no-repeat; 
background-attachment: fixed;
}

在此示例中，頁面 ID 填為 352，我們從媒體庫中貼上了背景圖片 URL。

如有必要，如果您在安裝螢幕背景圖片時遇到困難，請更改自定義背景設定。例如，您可能需要修改 WordPress 背景圖片大小、附件或位置等元素。如果不需要，請保持示例程式碼中的原樣。

為 WordPress 網站新增自定義 CSS

對自定義 CSS 滿意後，點選 Publish 按鈕。

點選發布按鈕

有了自定義 CSS，頁面就可以使用程式碼的大小和定位設定指定背景圖片。除非為不同的頁面 ID 重複設定 CSS，否則網站上的其他頁面都不會顯示相同的背景。

背景圖片現在顯示在頁面上

如前所述，為 WordPress 頁面新增獨特背景的其他方法包括使用頁面生成器或允許在單個頁面上新增背景圖片的外掛。

不過，在單個頁面上放置背景圖片的最便宜、最快捷的方法是使用上圖所示的 CSS 程式碼方法。

如何為 WordPress 文章新增背景圖片

大多數背景圖片都會插入 WordPress 頁面或整個網站的每個頁面。
WordPress 的預設自定義背景功能與單個文章無關，只是在部落格文章中也會顯示該背景。這對於所有組織來說並不理想，因為不同的部落格文章可能有截然不同的主題。

這樣的部落格可以從自己獨特的背景圖片中受益。但是，WordPress 文章沒有自己的背景圖片設定，這就有點麻煩。

因此，在為文章新增背景圖片時，我們有幾種方法可以考慮（你會發現它們與處理特定頁面背景圖片時的方法相同）：

• 使用自定義 CSS 插入背景圖片。
• 使用外掛為單個文章新增背景。
• 為文章背景安裝視覺化頁面生成器。

與上一節關於獨特頁面背景的內容一樣，你也可以使用頁面生成器或外掛新增文章專用背景。

鑑於製作文章專用背景與製作頁面專用背景並無太大區別，我們將只簡要介紹處理單個文章背景的步驟。

使用自定義 CSS 實現特定文章背景時，使用的程式碼與頁面背景相同，但有一點不同：必須找到文章 ID，而不是頁面 ID。

因此，開啟要插入背景的 WordPress 文章的前端。

WordPress 文章背景影象

右鍵單擊文章，選擇“檢查”選項。在程式碼中完成搜尋，找到程式碼中的 body class 部分。查詢  postid-#  部分–這是你需要插入到自定義 CSS 中的文章 ID。

你會注意到，在這個例子中，文章 ID 的格式與頁面 ID 的格式略有不同，postid-# 標記中的“post”和“id”之間沒有破折號，而 page-id-# 標記中則有破折號。此外，這些並不是硬性規定。你可以找到不同格式的標籤。

現在，進入 WordPress 面板，點選外觀 > 自定義。導航至“額外 CSS”選項卡。

轉到“額外 CSS”部分

將以下程式碼貼上到自定義 CSS 欄位中：

body.postid-# { 
background-image: url("http://YOURIMAGEURL.jpeg"); 
background-position: center center; 
background-size: cover; 
background-repeat: no-repeat; 
background-attachment: fixed;
}

然後，輸入之前從所需文章中找到的文章 ID 編號。用數字替換 CSS 程式碼中的“#”。此外，將 http://YOURIMAGEURL.jpeg 文字改為您希望顯示的背景圖片的真實 URL，並保留引號。

為特定文章 ID 新增自定義 CSS

確保在離開“額外 CSS”選項卡前點選“釋出”按鈕，因為這將在網站上儲存您的更改，並允許您在前端檢視背景。

點選“釋出”按鈕儲存更改

完成 CSS 更改後，您就可以回到 WordPress 部落格文章的前臺檢視新背景了。測試網站上的其他博文和頁面，看看其他博文和頁面是否也有背景，除非你為這些博文 ID 執行了相同的程式碼。

檢視博文的背景圖片

如何為獨立內容區塊新增背景圖片

WordPress Gutenberg 區塊編輯器的獨立內容塊允許多種內容顯示選項，包括文字框、圖片和相簿。

它們將內容分割成不同的部分。因此，您可以為該區塊新增背景顏色或圖片。

例如，假設您正在撰寫一篇關於服裝零售業現狀的博文。您想在文章的結尾或開頭呼籲人們報名參加下一次網路研討會。通過使用背景顏色或圖片來突出這一部分是很合理的。

遺憾的是，WordPress 的區塊編輯器並沒有提供可以為任何區塊新增背景的全面設定。不過，有些區塊可以選擇加入彩色背景。

還有一種稱為 “封面”（Cover）的區塊，是最接近為文章或頁面中的一個區塊新增背景圖片的區塊。封面允許你疊加文字和一些媒體專案，因此適合我們的最終目標。

以下是為單個 WordPress 區塊設定圖片或彩色背景的技巧。

為一個區塊設定彩色背景

為單個區塊增添活力的最簡單方法就是新增彩色背景。它不像圖片背景那樣花哨，但彩色背景實際上是 WordPress 區塊編輯器中唯一一種可用於標準區塊的背景型別。

注意：有些區塊根本沒有任何背景設定。如果是這種情況，你最好使用封面區塊，並在其上疊加其他區塊，本文將進一步介紹。

例如，段落區塊就有啟用彩色背景的設定。

要開啟該設定，請選擇該圖塊，然後找到右側 “區塊” 選項卡下的 “顏色設定“。

更改背景顏色設定

本節顯示文字顏色和背景顏色欄位。

轉到背景顏色區域，從可用選項列表中選擇一種顏色。你也可以選擇自定義顏色連結，插入自己的顏色程式碼或選擇一種獨特的顏色。

如你所見，一旦設定到位，段落塊的背景就會變成不同的顏色–本例中是藍色。

選擇背景顏色

為任何 WordPress 區塊新增彩色背景

如前所述，並非所有WordPress區塊都有這種內建背景功能。如果您想製作一個不提供背景選項的相簿或其他區塊元素，該怎麼辦呢？

最快捷的辦法就是使用 WordPress 中的組區塊功能。

為此，請選擇內容中已有的多個區塊。在本例中，我將同時選擇一個段落區塊和一個相簿區塊。

在出現的選單上點選堆疊的方形圖示。

頁面上的 “我們的團隊” 部分

在下拉選單中選擇 Group 選項。

這會將你當前選中的任何區塊合併為一個組，讓你可以一起移動或編輯它們，而不是單獨的區塊。

將各部分歸為一個區塊

這將把組設定為自己的區塊。這意味著你可以到頁面右側的 “區塊設定” 選項卡中找到它的設定。

找到 “顏色設定” 選項卡並點選。

更改分組塊的顏色設定

與標準段落塊一樣，分組區塊也有背景顏色功能。

在這種情況下，選擇你最喜歡的顏色，就可以看到該組中的所有內容現在都有了這種背景顏色。

群組塊的最大優點是，它可以使用另一個沒有背景功能的塊（如相簿區塊），並允許你為其啟用背景。

將背景顏色設定為藍色

為 WordPress 區塊新增圖片背景

WordPress 塊既可以在頁面中使用，也可以在文章中使用。因此，我們可以在任何一種情況下實施這一策略。您可以在分組塊的背景上方插入任何內容，也可以只在一個 WordPress 塊中插入。

要開始這個過程，請點選新增區塊或 “+“圖示按鈕，然後搜尋封面區塊。

選擇該區塊，將其插入到您的文章或頁面中。

新增封面圖片區塊

然後，您必須點選 “上傳” 或 “選擇媒體” 按鈕，這樣就可以搜尋可用作背景的圖片。

點選 “選擇媒體” 按鈕

選擇你想要的圖片，然後點選 “選擇” 按鈕。

選擇圖片並點選 “選擇” 按鈕

現在你可以看到該圖片作為封面區塊的背景。

點選該圖塊即可開始輸入段落內容，因為它的主要功能是覆蓋文字。

封面區塊的好處在於它提供了多種格式選項，讓你可以在幾秒鐘內從標題跳轉到段落格式。

區塊的 WordPress 背景圖片

要在背景上新增其他區塊，請單擊封面區塊內的 “+”圖示按鈕。您可能需要按一次回車鍵才能顯示該按鈕。

點選區塊部分的加號

與在普通文章中新增內容塊一樣，封面塊允許您滾動瀏覽 WordPress 中所有潛在的內容塊。

這意味著您可以在封面區塊中放置圖片、相簿、列或任何型別的 WordPress 區塊，使其成為使用單獨區塊製作圖片背景的理想解決方案。

搜尋區塊

在本例中，我插入了一張圖片，並對其進行了一些格式化處理，使其在封面區塊中看起來可以接受。

在右側的 “區塊” 選項卡中，放在背景前的每個區塊都有自己的自定義設定，因此在將它們放入封面區塊時，請考慮對它們進行編輯。

帶有 WordPress 背景圖片的圖片區塊示例

在某些情況下，你可能想編輯或自定義背景圖片本身。如果是這樣，請選擇封面區塊，然後轉到頁面右側的 “區塊設定” 選項卡。

這將顯示背景圖片的各種調整設定，包括以下設定：

• 固定背景
• 重複背景
• 焦點選擇器
• 尺寸
• 疊加
• 不透明度
• 高階

更改區塊設定

其中一個需要考慮的重要設定位於 “區塊設定” 面板的底部。

向下滾動可找到疊加部分。開啟該部分可以看到顏色疊加列表，以及將這些顏色設為純色或漸變色的選項。

這是一個很好的選項，可以稍微改變背景顏色，以匹配你的品牌或突出前景內容。你還可以調整不透明度，確保疊加顏色不會完全淹沒背景。

更改區塊的背景顏色

作為替代方案，可以考慮使用 Stackable Page Builder Gutenberg Blocks 外掛，為單個區塊的背景開啟更高階的工具。

如何在 WordPress 頁首後面放置背景圖片

到目前為止，我們已經討論瞭如何為整個 WordPress 網站新增背景圖片，以及在 WordPress 塊、文章和頁面等特定區域新增背景的方法。但包含選單和徽標的區域呢？

有時，您只需要在頁首後新增背景即可。

為頁首設定背景圖片可以為網站增添新的活力，尤其是在有節日或大促銷的時候。

首先，進入 WordPress 儀表板中的外觀 > 頁首。

注：您也可以在外觀 > 自定義 > 頁首部分找到頁首設定。

WordPress 控制面板 > 外觀 > 頁首

現在你應該會在螢幕右側看到主頁預覽，以及左側的頁首設定。

頁首模組說明了任何頁首背景圖片的首選尺寸，所以你可以選擇在上傳前裁剪圖片，或者等到在 WordPress 儀表板上獲得圖片後再上傳。

在當前頁首標題下，點選新增新圖片按鈕。

點選 “新增新圖片” 按鈕

標題很棘手，因為你要確保所有連結和文字元素（更不用說你的徽標了）在背景圖片上看起來非常清晰。

因此，我們建議試用背景圖片，並考慮使用純色和圖案較多的圖片。它們不會讓你很難看到選單項和徽標。

選擇一張看起來比較理想的圖片，然後單擊 “選擇並裁剪” 按鈕繼續。

選擇圖片

我們喜歡內建的裁剪工具，因為它會自動為標題背景圖片提供正確的尺寸。與事先在 Photoshop 等軟體中編輯照片相比，這可以加快整個過程。

將裁剪框移動到最適合背景圖片的位置。如果需要進一步縮小圖片，可以隨意拖動其中一個角。

裁剪完美后，點選 “裁剪影象” 按鈕。

裁剪圖片

在 WordPress 定製器預覽中，頁首背景圖片會立即啟用，幫助您清楚地看到客戶會看到什麼樣的背景。

您會發現，頁首背景圖片不會滲入頁面內容的其他部分。相反，它會保留在頁首中，位於徽標、標語、選單和搜尋欄等當前位置的任何內容之後。

選擇頁首背景圖片

標題背景的另一種選擇是上傳多張圖片並讓它們隨機旋轉，這樣每當使用者登陸網站主頁時，就能為網站增添一些亮點和驚喜。

要做到這一點，首先必須在 “頁首 “設定框中上傳幾張圖片。單擊 “新增新圖片” 按鈕完成該過程。

有了多張圖片後，點選隨機上傳頁首按鈕，啟用每次顯示不同頁首背景的功能。

新增更多頁首

您可能會發現，在頁首中新增背景圖片會使您難以看到某些頁首專案，如選單或購物車。

如果是這種情況，我們建議不要立即刪除頁首圖片。而是轉到文字顏色和連結顏色欄位，看看任何調整是否會有幫助。

文字顏色設定可控制標題中任何未超連結到其他內部或外部頁面的文字。很多時候，這隻意味著標語（如果有的話），但有時也可能有其他專案，如購物車總數或社交媒體圖示，它們也會隨文字改變顏色。

另一個方框是連結顏色。當你調整這個顏色時，很可能會看到更多的變化，因為它包括所有連結到其他頁面的選單項。

WordPress 背景圖片上的文字顏色

下面是一個例子，說明當你為文字顏色和連結顏色都選擇一種新顏色時會發生什麼。你可以看到，標語和網站名稱變了，選單變成了白色，購物車圖示等大多數其他頁首元素也變了。

檢查頁首元素

如果對標題使用背景圖片不感興趣，也可以選擇使用純色背景。

為此，請在 “頁首設定” 區域下找到 “背景顏色” 欄位。

單擊 “選擇顏色” 按鈕，從顏色面板中進行選擇，即可看到預覽結果。使用背景色時，還可以更改文字顏色。

設定背景顏色

測試最適合你的頁首的顏色，併為頁首確定完美的背景圖片後，點選 “釋出” 按鈕，讓所有人都能看到更改。

如果您在前端顯示更改時遇到任何問題，請考慮清除 WordPress 快取。

點選 “釋出” 按鈕

如何為 WordPress 分類新增背景圖片

WordPress 分類存檔頁面彙集了某個分類下列出的所有文章。例如，許多網站都有產品等自定義文章型別的分類。預設情況下，所有 WordPress 網站都有文章類別。那些未分類的文章會被標記為 “未分類” 類別。

由於分類歸檔頁面彙集了類似的內容，因此在這些頁面上包含一張相關的背景圖片以更好地展示分類是很有意義的。例如，你可以為網頁設計類別設定一個技術導向的背景，或者為旅遊類別設定一個貝殼或海灘圖案的背景。

自定義 CSS 方法（概述如下）是最便宜的選擇。不過，你也可以研究一下各種頁面構建工具和外掛，看看哪些它們允許在分類頁面上設定背景。

要使用 CSS 完成這項任務，請開啟 WordPress 儀表板，進入外觀 > 自定義。

選擇 “額外 CSS” 選項卡，開啟允許輸入自己的 CSS 的模組。

轉到 “額外 CSS” 部分

開啟 WordPress 網站上的一個分類檔案頁面。通常，這些頁面的 URL 如下： http://yourwebsitedomain.com/category/travel。您需要將 “travel” 部分更改為您自己網站上的任何類別，並將 yourwebsitedoman 部分更改為您的實際域名。

右鍵單擊類別頁面上的任意位置，然後單擊 “檢查”。這將在瀏覽器中顯示檢查工具，並顯示該頁面的程式碼供你檢視。

右鍵點選網頁，選擇檢查

搜尋 “body” 或 “class”，找到分類頁面的 CSS 類，尤其是該分類的 CSS 類。

在這種情況下，我們的 CSS 類是 “category-travel”，因為我在網站上有一個名為 “Travel” 的類別。

儲存 CSS 標籤備用。

記下列出的類別

然後，返回到 WordPress 定製器中的 “額外 CSS” 部分。

將以下程式碼貼上到該框中，將 category-travel 類換成你自己的類，並在寫有 http://YOURIMAGEURL.jpeg 的地方放置一個真實的圖片 URL。

body.category-travel {
background-image: url("http://YOURIMAGEURL.jpeg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

為 WordPress 背景圖片新增自定義編碼

單擊 “釋出” 按鈕儲存更改。

新增 “自定義 CSS” 程式碼

最後，回到 WordPress 網站前端的分類歸檔頁面。現在顯示的頁面應該與之前相同，但背景已在 CSS 程式碼中指定。如果在 WordPress 背景圖片格式化方面遇到任何問題，請切換回額外 CSS 面板，調整背景的位置、大小和重複功能等元素。

進入分類頁面檢視背景

如何為 WordPress 登入頁面新增背景圖片

WordPress 登入頁面有兩個版本：一個版本用於訪問網站並希望註冊和登入網站的普通使用者，另一個版本用於內部使用者，如管理員和作者。

這些登入頁面與網站的主要工作分開（大部分檔案位於 wp-login.php 檔案中）。因此，自定義背景圖片工具不會滲入登入模組。

有多種 WordPress 登入頁面自定義外掛可供選擇。在這裡，我們將向你展示如何使用 LoginPress 更改 WordPress 的預設背景。

LoginPress 網站

它可以讓您直接從 WordPress 管理儀表板更改登入頁面上的每個元素，而無需編寫任何程式碼。

要使用 LoginPress 更改 WordPress 的預設登入背景，請先在網站上安裝並啟用它。

完成後，進入 WordPress 管理儀表板的左側邊欄，導航到 LoginPress。外掛的主要功能位於 “設定”、”自定義” 和 “附加元件” 部分。

選擇自定義選項

只需選擇自定義選項。

在下一個螢幕上，你可以看到左側的所有自定義內容和右側的實時預覽，在這裡你可以並排跟蹤你所做的更改，包括

• 主題
• Logo
• 背景
• 自定義登入表單
• 自定義忘記密碼錶單
• 更多…

LoginPress 自定義介面

接下來，你將進入背景自定義介面，在這裡你可以看到 3 個背景選項，包括：

• 背景顏色
• 背景圖片
• 背景視訊

不同的背景選項

背景顏色

如果您希望使用背景色，請先禁用背景圖片。然後點選 “顏色選擇器” 工具。它會顯示一個顏色面板，讓你準確選擇適合你業務的顏色。

最棒的是，你還可以在 WordPress 自定義預覽中並排跟蹤更改。

背景顏色選項

背景圖片

引人注目的背景為 WordPress 登入頁面奠定了正確的美學基調。LoginPress 可讓您在登入頁面動態展示您的品牌形象。

LoginPress 的背景圖片功能提供兩種選擇，可為登入頁面新增引人入勝的背景，包括

• 背景相簿：背景相簿提供一些內建背景圖片。
• 背景圖片：背景圖片選項可讓你從電腦中選擇任何想要的圖片。

背景圖片選項

除此以外，你還可以進行其他設定，以確保上傳的圖片當前處於最佳瀏覽狀態，例如：

• Background Image Repeat：此功能可幫助你重複背景圖片，例如 x-repeat, y-repeat, 和 inherit 等。
• Select Position：該選項可讓您自定義所選背景圖片的位置。
• Background Image Size：您還可以調整背景圖片的大小，如 Auto, Cover, Contain 等。

您可以根據照片的大小，使用這些選項進行調整。

圖片大小選項

背景視訊

您還可以使用 LoginPress 在 WordPress 的預設登入頁面中新增背景視訊。為此，只需啟用背景視訊選項即可。

現在，你可以看到又多了 2 個選項，包括：

• Media
• YouTube

背景視訊選項

如果要選擇任何自定義視訊，請單擊 “選擇視訊” 選項 > 上傳檔案 > 選擇檔案 > 並選擇檔案。全部完成！

選擇自定義視訊

如果要選擇任何 YouTube 視訊，只需選擇 YouTube option > 新增 YouTube 視訊的 ID。

YouTube 選項

請記住，無論您選擇顏色、圖片還是視訊作為 WordPress 登入頁面的預設背景，都不要忘記單擊 “釋出” 按鈕，讓受眾看到實時更改。

點選發布按鈕

除了自定義 WordPress 預設背景圖片的整體外觀外，您還可以對 WordPress 預設登入頁面的一般行為進行更改，例如：

• 強制重置密碼
• 會話過期
• 自動記住我
• 自定義密碼欄位
• 登入順序
• 啟用 PCI 合規性

LoginPress 設定頁面

使用 LoginPress 為您的網站製作 WordPress 背景圖片，可為預設的 WordPress 登入頁面帶來視覺上的吸引力和個性化的觸感。它為您提供了建立使用者友好型登入介面的機會。

如何為導航選單新增背景圖片

你可能注意到有些網站的選單很花哨，包括背景圖片或圖示。這種做法在電子商務領域很常見，品牌可能會有一個超大型選單，上面有類別和每個類別按鈕的背景圖片。

如果您有興趣在選單中新增背景，請檢視我們關於最佳 WordPress 選單外掛的文章。其中許多選單外掛都提供在選單中加入圖片和彩色背景的選項。

鑑於有多種外掛可以為導航選單新增特定背景，我們將提供兩種外掛的教程，其中一種可以在子選單後面新增背景。相比之下，另一種則是在移動選單中新增背景。

要為不同的子選單新增背景圖片，請安裝並啟用 WP Mega Menu 外掛。該外掛可以啟用和管理具有多個下拉層級的巨型選單。它是大型網店的理想選擇，但它也適用於較小的選單，尤其是如果你想新增背景圖片或圖示的話。

WP Mega Menu 外掛

首先在 WordPress 面板中找到 WP Mega Menu 選項卡。

點選 Themes 選單項。

轉到 Themes 面板

在這裡，您可以看到外掛為您的選單建立的預設主題列表。

您可以點選編輯任何主題，或從頭開始新增自己的設計。

多種 Mega Menu Themes

每個主題都有自己的設定，你可以在設定中指定主題標題、選單欄選項和品牌徽標等元素。從下拉選單到子選單，選單的每個部分都可以自定義。

不過，對於選單背景，您只需知道要選擇哪個主題即可。

設定 Mega Menu 主題

進入儀表板中的外觀 > 選單。

轉到外觀 > 選單

你會看到一個連結到 Mega Menu Settings 的新模組。

單擊 Enable 啟用 mega menu，然後選擇最適合您網站的選單。

最後點選 Save  按鈕。

單擊“啟用”按鈕

現在，將注意力轉移到 Menu Structure 區域。

滾動任何當前選單項都會顯示一個 WP Mega Menu 按鈕。您可以在此自定義每個下拉選單部分的佈局和設計。

點選你想要的任何選單項的 WP Mega Menu 按鈕。在本例中，我們將為 Shop 選項卡新增一個下拉選單。

注意：我們假設您已經在 WordPress 網站上配置了選單。如果需要幫助，請閱讀我們的 WordPress 下拉選單指南。

在網站上新增 mega 選單

在新彈出的視窗中，開啟開關，為該選單項開啟 Mega Menu。

然後，您可以新增一個下拉行，並將左側的許多部件拖入該行。例如，我們將拖動一個產品列表，這樣當有人滾動到 Shop 選單項時，它們就會顯示出來。

單擊 Add Now 按鈕

要為下拉選單區域新增背景，請單擊左下角的 Options 按鈕。

選擇 Options 連結

找到 Upload Background Image 欄位。

單擊 Upload 按鈕，在媒體庫中找到合適的照片作為背景。

選擇 Upload Image 按鈕

從媒體庫中選擇圖片後，圖片縮圖就會出現。

還有一些其他設定需要考慮，請隨時檢視。

驗證縮圖

請務必點選 Options 面板底部的 Save Changes 按鈕。

點選 Save Changes 按鈕

您還需要在 WordPress 儀表板的 Menu Structure 區域點選“Save Menu”。

單擊 Save Menu 按鈕

現在，導航到網站前端檢視選單。如果滾動到我們剛剛自定義的專案上，就會看到一個帶背景的下拉部分。

選單現在有了背景圖片

為選單新增背景圖片的另一種方法是使用移動、響應式選單，當有人通過移動裝置訪問你的網站時，選單就會顯示出來。

您可以藉助 WP Mobile Menu 外掛在移動選單後面放置背景圖片。

WP Mobile Menu 外掛

安裝並啟用 WP Mobile Menu 外掛後，進入 WordPress 面板中的移動選單選項。

轉到 Mobile Menu Options

該外掛提供了幾種配置移動選單的方法。一般要求是啟用其中一種選單格式，並指明該移動選單要使用哪個 WordPress 選單。

例如，我們可以點選 Enable Left Menu（開啟位於螢幕左側的移動選單），然後從  Left Menu 下拉選單中選擇 Main Menu 選項。這樣就可以將當前的主選單與移動選單連線起來，這樣訪問者就可以看到相同的標籤。

設定移動選單選項

這取決於你建立的移動選單型別，但由於我們建立的是左側選單，所以可以點選左側選單選項卡，顯示新增背景的相應設定。

選擇左側選單設定

向下滾動到 Panel Background Image 欄位，點選 “+”號開啟媒體庫。

新增移動選單背景圖片

從媒體庫中選擇一張圖片並將其新增到欄位中。

您應該會看到背景圖片的縮圖作為確認。

選擇 Save Changes 按鈕啟用背景。

用縮圖驗證背景圖片

由於外掛會生成移動選單，因此選單可能只在瀏覽器設定為窄寬度或在手機或平板電腦上訪問網站時才會顯示。

新選單會合併到漢堡包圖示（三條橫線）下。

點選該圖示，測試新選單的背景。

點選漢堡選單圖示

如截圖所示，背景會放在整個移動選單的後面，讓所有人都能看到。

帶背景影象的移動選單

如何為維護頁面新增 WordPress 背景圖片

所有網站偶爾都需要維護，有時維護時間過長，顯示維護頁面會有所幫助。

在維護頁面中，背景圖片發揮著重要作用。大多數維護頁面由一張全屏背景圖片和一些文字或更多資源連結組成。

如果你已經有了一個維護頁面，但它不包括背景圖片，可以考慮採取以下步驟，為你可能需要關閉網站一段時間的公眾提供一個優美的環境。

你可以藉助 Maintenance 外掛為維護頁面新增背景圖片。在網站上安裝並啟用外掛。

Maintenance 外掛

啟用後，在儀表板頂部找到 Maintenance is On/Off 按鈕。

點選該按鈕進入維護外掛的設定頁面。

單擊 Maintenance is off 連結

進入設定頁面的另一種方法是點選儀表板側邊選單中的 Maintenance 選單項。

點選 Maintenance 選單項

Maintenance 外掛的 Settings 頁面上有大量可定製的選項，但需要考慮的主要區域是  General Settings 模組。在這裡，你可以寫入標題和描述，它們都是覆蓋在我們將要插入的背景之上的文字。

頁面標題會顯示在瀏覽器標籤頁中，所以你也應該考慮自定義頁面標題。

從維護頁面到即將推出的頁面，你都可以使用維護外掛，因此你可以輸入類似“我們的網站正在維護中”這樣的內容，也可以顯示一些關於你公司的資訊，幷包含一個供人們輸入電子郵件地址的表單。

為維護頁面新增標題

接下來，外掛還提供了上傳徽標的選項，徽標也會疊加在背景圖片之上。

Upload Logo 按鈕

單擊 Upload Logo 按鈕並選擇徽標，即可在儀表板中看到其縮圖。

維護頁面的 Logo

最後，背景圖片欄要求你點選上傳背景圖片。

可以從電腦上傳圖片，也可以在媒體庫中查詢適合維護頁面的背景圖片。

注意：最好的維護背景圖片是大尺寸、高解析度和橫向的。下面的設定中提供了一種 Portrait Mode 背景選擇。

單擊 Upload Background 按鈕

選擇背景後，它將以較小的縮圖預覽形式出現在儀表板中。

背景圖片縮圖

雖然橫向背景圖片對於臺式電腦和較寬的螢幕來說最合理，但許多人在訪問網站時使用的是縱向螢幕，比如豎著拿手機。

因此，較寬的背景圖片看起來就不那麼美觀了。因此，該外掛提供了一個 Portrait Mode Background Image 作為替代，當使用者使用縱向螢幕訪問頁面時，背景圖片就會響應式地切換進來。

在該欄位中包含圖片非常重要，因此請單擊 Upload image for portrait device orientation 按鈕。

上傳縱向背景圖片

這一次，請找到一張高度大於寬度的圖片（縱向模式）。你可以裁剪原始背景圖片使其變成縱向，也可以選擇上傳完全不同的圖片來填補空白。

突出顯示你想要的圖片，然後單擊 Select Image 按鈕將其插入儀表板。

選擇背景圖片

除非啟用維護模式，否則所有這些設定都毫無意義。

為此，請找到 Settings 頁面頂部的 Maintenance On/Off 開關。

設定維護頁面 On 或 Off

開啟開關，使其顯示為 On，然後選擇 Save Changes 按鈕。

啟用維護頁面

進入網站前端，確保背景圖片和維護頁面正常顯示。

很有可能沒有顯示。

這有兩個原因： 首先，您必須登出 WordPress 管理帳戶才能看到維護模式網站。其次，您可能需要清除網站快取以更新內容變化。

在 Maintenance Mode 下檢視網站

例如，當我登出管理員賬戶後，進入任何頁面時都會顯示維護頁面。

背景圖片就在那裡，還有我的自定義內容，如徽標和文字說明。

維護頁面的背景圖片

此外，將瀏覽器視窗的大小更改為縱向，就能將縱向模式背景固定到位。

在手機或平板電腦上訪問網站時，也可以看到縱向模式。

縱向模式下的背景圖片

該外掛的另一種背景圖片稱為預載入器圖片。它主要是在顯示實際的維護頁面、背景和內容之前，快速載入一張具有動畫效果的圖片。

與普通背景圖片一樣，點選 Upload Preloader 按鈕，找到一張看起來不錯的圖片並將其新增到儀表板上。

再次點選 Save Changes 按鈕並清除快取。

點選 Upload Preloader 按鈕

預設情況下，Preloader Image 效果會旋轉片刻，然後消失，呈現維護頁面和背景影象。

是否保留這種效果完全取決於您的意願。

為背景圖片新增介紹效果

在 Maintenance 外掛的 Settings 面板中，您還可以嘗試其他一些背景元素。

例如，你可能想新增背景顏色而不是背景圖片。

如果是這樣，請轉到 Background Color 欄位，選擇適合您品牌的顏色。

開啟背景顏色欄位

除非禁用所有其他背景圖片，否則維護頁面不會顯示背景色。

因此，請確保刪除了背景圖片。

刪除背景影象

您還必須刪除 Portrait Mode 背景影象。

設定 Portrait Mode 背景影象

儲存更改並清除快取。然後進入網站前臺檢視背景顏色的效果。

檢查網站前臺

需要考慮的其他設定包括字型顏色、字型家族和背景模糊等專案。

我們還建議您考慮是否需要前臺登入。這將為使用者提供一種登入賬戶的方式，並在必要時訪問個人資料。

一切完成後，單擊 Save Changes 按鈕。

設定字型顏色

Maintenance 外掛還提供多個預製主題，這些主題具有精美的背景圖片和專業設計的佈局和文字。

您可以找到“即將釋出”頁面和維護佈局的主題，以及用於收集電子郵件地址和其他聯絡資訊的頁面。

您必須購買這些主題才能使用。

購買高階主題

根據您的預算，它們相當便宜，而且外觀漂亮。

模板示例

對於那些對購買主題不感興趣的使用者，上述所有設定均可供您使用。您還可以進入 Custom CSS 模組，隨心所欲地配置維護頁面和背景圖片。

進入 Custom CSS 模組

請記住，除非您退出管理員賬戶並點選 Clear Cache 按鈕，否則維護頁面設定很少生效。

使用 Kinsta 時，您可以在儀表板的右上角找到 Clear Cache 按鈕。如果使用不同的主機，可以考慮使用市場上眾多的快取外掛之一。

點選 Clear Cache 按鈕

清除快取並儲存設定後，您就可以看到與維護頁面相得益彰的精美背景圖片！

檢查維護頁面

如何使用第三方頁面生成器新增 WordPress 背景

我們在最佳頁面生成器一文中提供了選擇具有拖放功能的頁面生成器的一系列選項。WordPress 的 Gutenberg 中已經包含了一個頁面生成器，但許多網站所有者更喜歡其他解決方案。

下文將介紹如何使用一些流行的頁面生成器來實現背景，包括 Elementor、Beaver Builder 和 SiteOrigin 的 Page Builder。

使用 Elementor 新增 WordPress 背景

Elementor 是一款流行的頁面生成器，旨在大大加快網站製作速度，它提供了一個免費外掛，其中包含多種背景圖片工具。

此外，Elementor 還為網站的各個部分提供了視覺化背景靈活性，而不是將背景限制在整個網站上。例如，你可以在任何積木式部分後面新增背景，並在頁面與頁面之間顯示不同的背景。

首先，安裝並啟用 Elementor 外掛。

Elementor 外掛

Elementor 將背景設定分散在整個生成器中，這樣就可以很容易地選擇元素並在需要時實現背景。因此，從技術上講，你可以進入任何頁面或文章，期望獲得背景上傳按鈕。

在本例中，我們將訪問測試網站的主頁。從 頁面 > 所有頁面 的列表中選擇頁面，訪問所選頁面。您也可以對文章進行同樣的操作。

進入 WordPress 預設頁面編輯器後，點選 使用 Elementor 編輯 按鈕。

點選使用 Elementor 編輯器

這樣，螢幕上的檢視就會切換到 Elementor 編輯器。在這裡，左側有一個選單，通過拖放模組來構建和編輯頁面。

背景功能不在章節或塊中提供，而是在該頁面的主要設定中提供。

因此，請點選編輯器左下角的設定小圖示（看起來像一個齒輪）。

單擊設定圖示

這將顯示一般頁面設定部分。

單擊 Page Settings 部分頂部的 Style 選項卡。

轉到 Style 選項卡

在 Style 下找到 Background Type 欄位，點選畫筆圖示新增標準背景。

設定 Background Type 欄位

接下來，選擇您希望出現的背景型別。例如，Color 欄位允許你將背景切換為純色。如果你喜歡漸變，Background Type 欄位中還有一個 Gradient 選項。

設定背景顏色欄位

單擊影象欄位下的 Choose Image 按鈕，調出媒體庫並選擇適合此頁面的背景影象。

點選 Choose Image 按鈕

像往常一樣，測試你的背景圖片，並堅持最佳尺寸和最佳做法（大多數情況下都是高解析度和縱向），然後選擇效果良好的圖片，單擊 Insert Media 按鈕。

點選 Insert Media 按鈕

選定的背景圖片現在會出現在右側的 Elementor 網站預覽中。您可能需要調整內容的其他部分，以確保文字和圖片等專案顯示在背景之上。

Elementor 提供了位置、附件、重複和 WordPress 背景圖片大小等圖片背景設定。修改這些設定，以確定你的背景作為固定附件、右上角方向或其他尺寸是否會更好看。

點選 Update 按鈕，將所有更改儲存到頁面併釋出網站的新背景。

新增新背景

使用 Elementor 建立版塊背景

Elementor 為新增到頁面中的大部分版塊提供高階背景功能。

您只需在 Elementor 頁面上選擇一個版塊，然後修改背景設定，即可將背景限制在該區域內。

例如，我們可以選擇 Text Editor 部分來檢視文字部分的設定。

使用 Elementor 選擇文字部分

選擇 Advanced 選項卡，然後在該選項卡中找到 Background 部分。

轉到 Background 部分

Background 設定包括  Background Type, Color, Image 等，與我們看到的一般頁面背景設定非常相似。唯一不同的是，它將這些設定限制在選定的部分。

為 Background Type 選擇畫筆圖示，然後單擊 Image 欄位下的 Choose Image 按鈕。

單擊 Choose Image 按鈕

從媒體庫中選擇圖片，然後單擊 Insert Media 按鈕。

選擇圖片並點選插入媒體按鈕

如你所見，背景圖片將保留在該部分的邊界內，同時位於已為該部分建立的內容後面。

使用 Position, Attachment, Repeat, 和 Size選擇器來修改背景圖片在版塊中的顯示方式。

最後，單擊 Update 按鈕儲存更改。

點選更新檢視更改

使用 Beaver Builder 新增背景圖片

Beaver Builder 外掛包含一個帶有一些基本背景工具的精簡版。它是市場上最受歡迎的頁面生成器之一，提供許多內容模組，如視訊、圖片、段落等。

除此之外，它還允許你使用視覺化工具和 CSS 將背景元素放置在整個網站、一個頁面或頁面上的某個部分，從而實現背景影象、顏色或視訊。

首先，安裝 Beaver Builder 外掛，開始使用。

Beaver Builder 外掛

轉到任何頁面或文章，使用 Beaver Builder 對其進行編輯。

您必須將以前建立的頁面轉換為 Beaver Builder 格式。或者，您也可以從頭開始建立一個頁面，然後選擇在 Beaver Builder 中編輯該頁面。

要將當前頁面轉換為 Beaver Builder 格式，請開啟該頁面編輯器，然後點選右上角的三點圖示，開啟 View 選單。

進入頁面設定選單

向下滾動，找到並選擇 Convert to Beaver Builder 連結。

它會嘗試編譯頁面上的所有內容，並將這些元素轉換為相容的 Beaver Builder 模組。

點選 Convert to Beaver Builder 連結

要從頭開始建立頁面，請轉到 Pages > Add New。

然後點選 Launch Beaver Builder 按鈕。

點選 Launch Beaver Builder 按鈕

Beaver Builder 外掛會將您帶入網頁的前端檢視。它佔據了螢幕的大部分，是一個真正的前端編輯器，你可以點選元素並用滑鼠移動方框。

通過 Beaver Builder 新增背景的第一種方法是上傳背景到一個部分塊。這可能佔據頁面的大部分，也可能只佔頁面的一小部分，這取決於你的區塊大小。

選中後，找到 Row Settings 按鈕（⚙ 圖示）。

單擊該圖示即可顯示該行的設定。您也可以對節和列以及其他型別的塊進行設定。

編輯行設定

網站預覽頂部會出現一個設定面板。單擊 Style 選項卡，然後查詢 Background 部分。

在 Background 下，單擊下拉選單以顯示所有背景型別。

轉到 Style 選項卡

您可以考慮幾種背景型別，其中一種是照片背景。其他型別包括

• 顏色
• 漸變
• 視訊
• 嵌入程式碼

為 WordPress 背景圖片設定型別

隨意測試不同的背景型別。

例如，您可能會發現 Gradient 背景比圖片更好看。每種背景型別都有自己的設定。在這種情況下，漸變型別需要兩種顏色，以便漸變從一種顏色移動到另一種顏色。

關於公司部分

選擇照片背景後，會顯示從媒體庫中選擇圖片或貼上圖片 URL 的欄位。如果使用媒體庫照片源，請單擊 Select Photo 連結。

點選 Select Photo 連結

查詢您喜歡的背景照片，然後點選  Select Photo 按鈕。

選擇媒體

Beaver Builder 會將照片放入之前選擇的背景空間。在 Photo Settings 部分，您需要了解照片的格式。您可以選擇Size, Repeat, Position, 和 Attachment 等選項。

設定背景圖片大小

全域性和整頁 Beaver Builder 背景圖片

Beaver Builder 與預設的 WordPress 設計工具配合使用，可利用內建的背景功能。

因此，您可以進入外觀 > 背景選項卡，為整個網站啟用照片背景。

或者，在 Beaver Builder 中開啟任何網頁，點選左上角的 Tools 下拉選單。

在此，單擊 Global Settings 選項。

Beaver Builder 的全域性設定

全域性設定面板可以更改整個網站，覆蓋或修改 WordPress 的內建編碼。因此，我們要插入一個 CSS 程式碼塊來更改整個網站的背景圖片（全域性）。

單擊 Global Settings 中的 CSS 選項卡，然後將以下程式碼段貼上到欄位中：

body {
background-image: url("URL to Image");
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: 100%;
background-color: #0f1066;
}

用所需背景照片的 URL to Image 的 URL。您還可以使用 CSS 程式碼更改重複功能、附件和背景大小等內容。

轉到 CSS 選項卡

使用 Beaver Builder 製作自定義頁面背景更為合理，因為每個頁面都有自己的背景圖片。

在頁面編輯器中，再次開啟 Tools 選單。

選擇 Layout CSS & Javascript 選項。

Layout CSS & JavaScript 按鈕

將相同的程式碼貼上到 CSS 選項卡中，將 URL to Image 文字更改為實際 URL，並調整任何設定：

body {
background-image: url("URL to Image");
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: 100%;
background-color: #0f1066;
}

正如你所看到的，整個背景會變成 CSS 程式碼中的 URL 影象。請記住，Layout CSS / Javascript 面板只控制當前頁面。除此頁面外，你不會在其他頁面上看到背景。

新增自定義 CSS

通過 Page Builder By SiteOrigin 新增簡單的行或小工具背景

Page Builder by SiteOrigin 是另一種拖放式視覺化網站製作工具。它為整個網站插入背景的能力有限（您需要使用標準的 WordPress 自定義背景工具）。不過，它提供了為SiteOrigin使用的行和部件新增背景圖片和顏色的設定。

首先，下載並啟用 Page Builder by SiteOrigin 外掛。

Page Builder by SiteOrigin 外掛

導航到一個新頁面，或考慮在網站的當前頁面上新增 SiteOrigin 行。

每個 SiteOrigin 部分都要求您 Add Widget 或 Add Row。如果你不想從頭開始設計，也可以瀏覽預置佈局。

好訊息是，SiteOrigin 中的部件和行都有包含背景圖片的設定。

因此，單擊 Add Widget 或 Add Row 按鈕繼續。

新增新的部件或行

在本例中，我們將檢視 Widgets 庫。

在這裡，你可以從 SiteOrigin 提供的眾多部件中選擇一個，從導航選單和頁面到文章內容和產品列表。

在這個例子中，我們將選擇 Products 小部件，但您也可以根據自己的設計需要選擇其他小部件。此外，您還可以使用行將這些部件分組，然後為該行新增背景圖片，這樣背景圖片就會出現在多個部件後面。

選擇 Products 部件

新的部件或行最終會出現在 SiteOrigin 頁面編輯器中。SiteOrigin的大部分功能仍在WordPress儀表板中，因此不像其他頁面生成器那樣有前端編輯器。

要為任何SiteOrigin專案新增背景，請滾動該元素並點選 Edit 連結。

點選 Edit 連結

在這個例子中，我選擇了 Products 小工具，但每個小工具都有自己的設定，可以配置它在網站上的外觀。

背景工具位於 Design 下拉選單下方。點選該連結繼續。

WordPress 背景圖片的 Design 選項卡

找到 Background Image 欄位，點選 Select Image 按鈕。

您還可以選擇為背景圖片貼上 External URL。

選擇背景圖片和顏色

媒體庫會顯示您當前上傳到 WordPress 的圖片。點選最適合該背景的圖片，然後選擇 Done 按鈕，將其放入 SiteOrigin 模組。

點選 Done 按鈕

現在，Background Image 欄會顯示該照片的縮圖。

向下滾動設定，配置從 Background Image Display 到覆蓋文字的 Font Color 的所有設定。

一般來說，選擇 Cover 顯示應該可以獲得理想的效果。SiteOrigin 外掛的預設設定似乎是平鋪顯示，所以你可能需要更改。

完成背景的自定義設定後，請務必點選 Done 按鈕。

WordPress 的 Background Image 設定

小部件（本例中為 Products 小部件）進入該頁面的 SiteOrigin WordPress 編輯器。您可以在頁面上任意拖動該元素，並在其上下新增新的部件和行。

您必須點選 預覽 或 更新 按鈕，然後瀏覽頁面的前端才能看到結果。

轉到“產品”部分

目前我新增的背景圖片出現在之前的 Products 部件的限制範圍內。這個背景顯然還需要一些編輯才能看起來更漂亮，但這是一個優質的開端，可以用一個看起來更有創意的背景圖片來歸檔空間。

該部分的背景

使用 Brizy 新增獨特的背景圖片

本次演示的最後一款頁面生成器 Brizy 提供了時尚的模板和卓越的前端介面，可用於新增不同尋常的設計和快速定製。

Brizy 頁面生成器包含大量拖放模組，可將其整合到你當前的網站中。它還允許你從空白模板開始，用 Brizy 構建你的整個網站。

因此，您會很高興聽到 Brizy 還為您通過頁面生成器新增的幾乎所有元素提供了背景工具。更不用說，Brizy 還有幾種獨特的背景樣式，比如在背景中新增迴圈視訊或完整地圖。

要利用這些背景設定，安裝並啟用 Brizy 外掛即可開始使用。

Brizy 頁面生成器外掛

Brizy 設計流程的大部分要求您從空白模板開始。Brizy 會嘗試將您的舊設計轉換成 Brizy 模組，但我們發現最好還是從頭開始。

轉到 WordPress 儀表板中的頁面或文章，然後開始建立頁面，加上標題和一些內容。

你會看到一個 Edit With Brizy 按鈕。點選該按鈕即可進入完整的 Brizy 頁面生成器。

點選 Continue to edit with Brizy 按鈕

Brizy 頁面生成器會顯示網站的完整預覽，包括按鈕、文字和影象。如果頁面是空白的，請點選 Start Building Your Page 按鈕。

點選加號圖示開始建立頁面

在上部選單欄中查詢 Layouts and Blocks 選項卡。

佈局提供預建網頁，其中包含演示內容，只需自定義公司內容即可使用。區塊是較小的網頁塊，但它們仍然是預建的，通常比你自己製作一個區塊更容易使用和操作。

無論你選擇哪個方向都沒有關係。瀏覽佈局和區塊，在頁面中新增你想要的元素。這些都是你用來組成一個完整網頁的元素。

佈局和區塊部分

當你在網頁上製作了一些區塊或佈局後，回到編輯器螢幕檢視你的作品。

你會發現每個區塊的右上方都有一個 Settings 圖示。

點選你所選區塊的設定圖示。我們將為該圖塊新增背景。

點選 Settings 圖示

區塊設定面板保留在右上角。滾動選單圖示，檢視它們的作用。

其中一個是  Colors，指的是背景顏色。如果你更希望使用純色或漸變色背景檢視，可以更改並新增漸變色。

背景的 Color 按鈕

左邊的圖示按鈕包含 Background 設定。

點選該按鈕可開啟快速工具，為該圖塊上傳背景圖片。

WordPress 背景圖片按鈕

Brizy 提供三種媒體背景專案：

• 圖片
• 視訊
• 地圖

首先，試用圖片型別，瞭解它如何與您當前的佈局配合使用。

點選圖片上傳區域，在媒體庫中找到一張照片並將其新增到背景中。

WordPress 背景圖片型別

我們為本教程找到了一張木板照片，並表示我們希望沒有視差效果。

這樣就增加了一種令人愉悅的效果，因為彩色背景起到了疊加的作用，但我們仍然可以看到背後的木質紋理。

記住，你可以隨時調整視差欄位，使背景圖片成為固定、動畫或滾動背景。

無視差背景圖片

這就是使用 Brizy 插入背景圖片的方法！

Brizy 最棒的地方在於，你可以在設計中不斷移動，點選每個部分的 Settings 按鈕。

一個部分下來，我們就可以插入另一張背景圖片，而無需花費太多時間。

新增另一張背景圖片

為了展示其他背景型別的強大功能，我們可以點選地圖背景型別，輸入一個地址，然後在前景內容後面就會出現該地點的地圖。

如果預設設定下的地圖效果不佳，該地圖會作為完整背景出現，並具有縮放功能。

將地圖新增為 WordPress 背景圖片

最後，我們推薦你使用 Brizy 背景視訊工具，它與圖片背景工具位於同一區域。它的工作原理是插入一個視訊 URL（YouTube 或 Vimeo），在前景內容後面呈現一個完整的視訊。它甚至還提供了迴圈播放視訊的設定，並可在使用者滾動頁面時選擇開始播放的時間。

WordPress 背景圖片的 URL

下面的動畫 gif 給出了視訊操作的一個簡短示例，儘管它可能需要一些編輯。

視訊背景

背景圖片大小、來源和基本編輯

我們在文章前面提到，儘管背景圖片沒有完美的尺寸，但我們建議從不小於 1024 x 768 畫素開始，並堅持使用 16:9 這樣的常用長寬比。長寬比並不像圖片的實際大小和解析度那麼重要，因為您可以裁剪圖片或讓 WordPress 代勞。

如果不打算自己拍照，找到合適的地方購買或借用 WordPress 背景圖片也很重要。

到哪裡尋找合適的背景圖片

關於背景圖片搜尋，請檢視我們的指南：無需離開 WordPress 即可查詢和新增圖片庫照片。我們還有一份有用的圖片市場來源清單，用於尋找高解析度的圖片庫照片，其中很多都是免費的。

總之，我們建議您嘗試自己拍攝背景圖片。如果不可能，或者您沒有攝影或平面設計經驗，可以考慮使用免費的圖片庫資源。您也可以選擇從許多優質圖片庫網站付費購買背景圖片，其中有些網站會收取月費，讓您下載大量照片。

這些連結中的一些亮點包括：

• Unsplash – 免費，無需署名。
• Visual Hunt – 免費照片。大多數圖片無需署名。
• Pexels – 免費，無需署名。
• Pixabay – 免費，大部分圖片無需署名。
• iStockphoto – 以相當低廉的價格訂購免版稅圖片。
• Shutterstock – 免版稅圖片，訂閱費用合理。

如何使用自定義 CSS 更改 WordPress 背景圖片

我們已經瞭解到，您可以使用標準的 WordPress 內建工具或外掛新增 WordPress 背景圖片。選擇哪種方式並不重要，只要能得到想要的結果就行。您還可以選擇使用自定義 CSS 來調整背景圖片的樣式，或者將其新增到您的網站中。

由於每種背景圖片和主題都會有不同的處理方法，我們就不介紹自定義 CSS 的複雜性了。不過，我們建議您閱讀我們關於在 WordPress 中編輯、新增和自定義 CSS 的指南。這篇文章涵蓋了為任何網站部分（從選單項到特定頁面塊）新增背景圖片的實用技巧。

修復 WordPress 背景圖片的常見問題

所有 WordPress 網站都具有新增背景的功能。但這並不意味著所有網站都能使用這一核心功能。例如，你可能會發現你使用的主題不支援自定義背景。又或者，你一直在上傳背景，但它看起來不太合適（太大或太模糊）。

在 WordPress 中遇到背景問題令人沮喪，不幸的是，這種情況也很常見。我們彙編了以下一些最常見的背景圖片問題，並列出了每種解決方法。

我的主題不支援 WordPress 背景圖片

主題開發人員可以控制 WordPress 中的自定義背景功能。他們可以開啟或關閉該功能，這取決於他們是否希望啟用自定義背景支援。如果不需要，或者與主題的整體設計相沖突，背景就會被關閉。

如果你發現自己的主題不支援自定義背景，或者在新增背景時限制了你的能力，請考慮以下解決方案：

• 更換一個支援自定義背景的主題。在購買或下載主題時，在功能列表中查詢自定義背景。
• 使用背景外掛覆蓋被阻止的自定義背景預設功能。

雖然可以使用自己的自定義編碼或在主題檔案中重新設定自定義背景，但我們通常建議不要使用這兩種方法。最好的辦法是找到一個支援背景的主題，或者新增一個允許背景但不會對主題功能造成太大影響的外掛。

我的 WordPress 背景圖片顏色太深或顏色不對

背景圖片變暗可能源於背景圖片本身的許多設定。大多數情況下，這與疊加濾鏡或背景顏色不合適有關。

對於大多數背景變色的情況，你必須檢查控制背景本身的主題或外掛。

查詢背景欄附近是否有要求濾鏡或疊加的設定。您還可能會發現一個不透明功能，應清除該功能，這樣背景才能正常顯示。

如果其他方法都不奏效，主題檔案中可能已經硬編碼了背景過濾器。在這種情況下，請聯絡主題開發人員，瞭解有哪些方法可以糾正背景顏色。

我的 WordPress 背景圖片位置不對

背景圖片顯示在錯誤的位置往往會影響網站的整體設計。你可能會發現背景過於偏左或偏右，或者本應是背景的中心焦點根本沒有出現在螢幕上。

幸運的是，移動背景只需點選幾下按鈕。

進入 WordPress 儀表板中的外觀 > 背景。找到當前作為背景上傳的圖片，然後查詢 Position 欄位。這個欄位可以讓你移動背景的位置，有向左、向右、向頂、向底或向角移動的選項。

我們建議點選所有定位按鈕來檢視它們產生的結果。找到合適的位置後，儲存頁面。

我的 WordPress 背景圖片重複出現

紋理和純色背景在重複顯示時通常會更好看，因為它們會忽略影象的斷點。然而，許多圖片在重複作為背景時看起來很糟糕，尤其是那些有大量細節和不同顏色的圖片。

如果您的源圖片不夠大，無法覆蓋整個背景而又不顯得拉伸，重複背景圖片佈局就會派上用場。因此，WordPress 有時會預設使用重複佈局來保持圖片的解析度。

這個問題的主要解決方案位於 WordPress 中的外觀 > 背景的背景部分。在上傳照片作為背景時，可以嘗試使用 Fill Screen, Fit To Screen, 或 Custom 等預設，而不要使用 Repeat 預設選項。

不過，你可能會發現，試圖讓一張較小的圖片覆蓋整個背景螢幕會導致不愉快的結果。在這種情況下，最好的解決辦法是完全替換背景源圖片，並尋找一張大尺寸、高解析度且可釋出到網路上的圖片。

我的 WordPress 背景圖片被拉伸

背景圖片被拉伸意味著您的自定義背景設定試圖使用較小的圖片，並用圖片覆蓋整個螢幕。

如果較大的高解析度影象不符合所需的長寬比，也會出現這種情況。對於拉伸的背景圖片，請考慮原始檔。選擇其他合適的圖片是最好的選擇。

還有一個問題是背景設定可能有誤。檢查一下背景圖片的位置，以及在 Fill Screen 模式下被拉伸到畫布上的情況。你可能只需要堅持使用原始尺寸或新增 Repeat 函式就能解決所有問題。

其他背景故障排除技巧

• 主題開發人員對 WordPress 中的自定義背景功能擁有完全的控制權。如果你安裝了一個主題卻無法使用背景，最好的辦法是聯絡主題開發人員或安裝一個新主題，看看是否能解決問題。
• 自定義背景顏色和圖片通常會覆蓋您為控制背景圖片大小、位置或來源而實施的任何自定義 CSS 程式碼。你可能不得不堅持使用主題的背景設定，而不是使用自定義 CSS。
• 主題在出售時可能已經啟用了自定義背景。通常情況下，你只需將背景圖片換成新的即可。有時，有必要進入主題檔案或使用自定義 CSS 來覆蓋主題設定。

最佳 WordPress 背景圖片外掛

如果您想進一步編輯背景圖片，對視訊背景感興趣，或者想使用工具製作特定頁面的背景，您可以考慮使用以下 WordPress 背景圖片外掛：

Simple Full Screen Background Image

Simple Full Screen Background Image 外掛

Simple Full Screen Background Image 外掛與 WordPress 的預設背景圖片工具並無太大區別，只是增加了自動調整瀏覽器大小和比例等功能。

總的來說，這個外掛最適合那些發現自己的主題阻止了新增背景的功能，或者在使用 WordPress 內建背景工具時遇到困難的使用者。它可以覆蓋 WordPress 上的內容，並在 WordPress 儀表盤上新增一個特殊的背景按鈕，以便即時從電腦上傳圖片。

僅此而已！

該外掛還有一個高階版本，提供更好的縮放功能，支援無限數量的背景和獨特的效果，還有更多。

Advanced WordPress Backgrounds

AWB – 高階 WordPress 背景外掛

Advanced WordPress Backgrounds 外掛採用不同的方法來處理 WordPress 背景，讓您可以利用獨特的效果為您的背景增色添彩。視差背景就是一個例子，當使用者滾動瀏覽網站時，它可以隨著使用者慢慢移動。

該外掛還支援視訊。視訊背景可以從 YouTube 和 Vimeo 等網站提取，您也可以自行託管。

還可以使用純色或紋理背景。所有這些背景型別都具有基本 WordPress 背景工具所不具備的高階功能。其中包括滾動和縮放效果、不透明度效果和自定義速度選項。

它支援 Gutenberg，可以與標準 WordPress 編輯器和許多其他視覺化頁面構建工具配合使用。最後，您還可以使用自定義 CSS 選項為您的背景新增更多風格。

Perfect Images + Retina

Perfect Images + Retina 外掛

Perfect Images + Retina 外掛是一個二合一解決方案，非常方便。它可以讓你管理 WordPress 背景圖片的大小和外觀，同時還能重新生成縮圖和替換圖片。圖片管理功能相當強大，對於高解析度背景尤其重要。

如果您選擇高階版本，該外掛還提供背景功能。它會為背景圖片生成視網膜等效影象，這樣即使在高解析度顯示器上，影象也能呈現出應有的效果。

Maintenance

帶 WordPress 背景圖片的 Maintenance 外掛

Maintenance 是一款簡單易用的外掛，用於設計維護頁面和即將釋出頁面。Maintenance 外掛有免費和高階兩個版本，但免費版本足以啟用維護頁面，並新增背景圖片，疊加文字和欄位。

你甚至可以上傳自己的徽標，自定義字型和圖示等內容，還可以選擇帶有精美背景圖片的各種模板。您還可以安裝它的許多預建模板，但其中大部分都需要該外掛的高階許可證。

小結

新增一個基本的 WordPress 背景圖片不費吹灰之力，就能在整個網站上顯示。這是 WordPress 核心中內建的一項功能，因此很容易為特定事件或節日更換背景。您也可以終身使用一種背景。

除了標準的 WordPress 背景，您還可以使用自定義 CSS 程式碼、外掛和頁面生成器在 WordPress 網站上實現各種背景。從特定頁面的圖片背景到選單按鈕的背景，各種可能性不一而足。

現在是時候為你的 WordPress 網站新增你一直想要的背景了。

我們漏掉了什麼嗎？如果您在新增或管理 WordPress 背景圖片時遇到困難，請發表評論。