指南/編輯網站/變更網站的背景圖片

變更網站的背景圖片

你可以自訂網站背景,為網站的外觀和風格增添個人特色。如果你想變更背景圖片,請依照本指引所述步驟進行。

選擇背景圖片的秘訣

設定背景圖片能有效彰顯個人特色,讓你的網站顯得別出心裁。以下提供幾個實用技巧,幫助你自訂網站的背景圖片:

  • 若選用的背景圖片不合適,可能會讓文字難以閱讀。為了達到最佳呈現效果,請選擇不會遮住網站內容的低調圖片或簡單圖樣。
  • 選擇高畫質圖片,讓網站展開至全寬時不致模糊。你可以從免費照片庫中挑選高畫質圖片。
  • 挑選圖片時,請選擇互補顏色,避免產生衝突或讓網站文字難以閱讀。

如果你想用背景顏色取代圖片,請參閱下列指引,了解如何變更網站的背景顏色。如果不想使用背景顏色,歡迎繼續了解如何更新背景圖片。

為網站設定背景圖片

你可以透過下列步驟變更網站的背景圖片。

若要判斷應遵循本指引的哪一節內容,請前往儀表板查看左側的「外觀」區段。如果在此看到「編輯器」,請參閱本指引的「網站編輯器」一節。否則,請參閱「自訂工具」操作說明。

使用樣式選項,即可為整個網站變更背景圖片。若要為網站新增、移除或變更背景圖片,請依照以下步驟操作:

  1. 前往網站的儀表板
  2. 前往「外觀」→「編輯器」
  3. 在左側選單中選取「樣式」。
    • 你也可以在編輯器中選取右上角的「樣式」圖示,該按鈕看起來像黑白圓圈。
  4. 按一下「背景」選項。
  5. 按一下「新增背景圖片」按鈕,從「媒體庫」選取圖片,或從電腦上傳圖片。
  6. 或者,你也可按一下已選取的圖片,自訂背景圖片設定
  7. 按一下「儲存」按鈕,即可將背景圖片套用至網站。
「樣式」編輯器中的「背景」選項。

調整背景圖片設定

設定背景圖片後,只要按一下背景圖片,即可開啟設定面板來設定焦點、位置和尺寸。

  • 焦點:可針對無法顯示完整圖片的小尺寸螢幕,設定你想著重的圖片焦點。你可以拖曳圖片中的圓圈,或用「向左」和「向上」百分比選項指定確切位置。
  • 背景固定位置:將背景固定於檢視區。圖片會在網站內容後方保持不動。
  • 尺寸
    • 覆蓋:延伸背景圖片來覆蓋整個區塊。
    • 包含:根據區塊尺寸調整背景圖片的大小,但不加以裁切。
    • 並列:在自訂欄位中,為背景圖片設定固定寬度。「尺寸」區段下的欄位可設定尺寸以及圖片重複與否。
包含焦點和尺寸的背景圖片設定畫面。

移除背景圖片

若要移除或替換背景圖片:

  1. 前往網站的儀表板
  2. 前往「外觀」→「編輯器」
  3. 在左側選單中選取「樣式」。
    • 你也可以在編輯器中選取右上角的「樣式」圖示,該按鈕看起來像黑白圓圈。
  4. 按一下「背景圖片」標籤旁的三點圖示,接著按一下圖片旁的「重設」選項,或面板底部的「全部重設」按鈕。
「背景圖片」頁首右邊有箭頭從三點圖示指向重設選項。

針對特定區塊新增背景圖片

如果你只想為頁面或範本的特定部份設定背景圖片 (而非整個網站),請使用「群組區塊」將內容加入群組,然後為該群組新增背景。

多種區塊都可設為在區塊的內容後方顯示背景圖片。為特定區塊設定背景圖片時,請依照以下步驟操作:

  1. 選取要新增背景圖片的區塊 (支援這項功能的區塊包括:「群組」區塊、「內容」區塊、「引文」區塊和「詩句」等區塊)。
  2. 開啟區塊設定側邊欄。

如果右側沒有出現側邊欄,你可能需要按一下右上角的「設定」圖示叫出設定。該圖示的外觀是一個方形,分成兩個不對等的欄位。

醒目標示 WordPress 編輯器頂端的「設定」圖示。
右上角的設定圖示
  1. 在區塊設定的「樣式」區段下,找到「背景圖片」設定。
  2. 按一下「新增背景圖片」,系統會隨即顯示下列選項:
    • 開啟媒體庫:從網站的「媒體」選取現有圖片。
    • 上傳:從電腦或裝置新增新的圖片。
    • 重設:移除背景圖片。
  3. 或者,你也可以按一下背景圖片的名稱,自訂焦點和尺寸等設定

背景圖片的優先順序會高於任何背景顏色設定。

Adding a background image to a Group block.
Copied to clipboard!