WordPressで背景画像を設定する完全ガイド

「ワードプレス 背景画像を変えたいけど、どこから設定すればいいの？」そんな悩みを持つ方、多いですよね。
WordPressの背景画像はサイトの第一印象を大きく左右する重要な要素です。
でも、設定の場所がわかりにくかったり、「変更したのに反映されない」といったトラブルも起きがちです。
この記事では、背景画像の設定方法から、推奨サイズ・表示スタイルの使い方・よくあるトラブルの対処法まで、WordPress初心者でもすぐ実践できる形で解説します。
読み終わるころには、あなたのサイトの背景を思い通りに変更できるようになっているはずです。

WordPressで背景画像を設定する基本的な3つの方法

結論から言うと、WordPressで背景画像を設定する方法は大きく3つあります。
それぞれ難易度とできることが異なるので、あなたの状況に合った方法を選びましょう。

カスタマイザーから設定する（最もかんたん）

いちばん手軽なのが、WordPressのカスタマイザーを使う方法です。
管理画面から「外観」→「カスタマイズ」を開くと、カスタマイザー画面が表示されます。
そこに「背景画像」という項目があれば、ボタン1つで画像をアップロードして設定できます。
プレビューを見ながらリアルタイムで変更が確認できるので、初心者でも直感的に操作できますよ。
ただし、この項目が表示されるかどうかは使っているテーマによって異なります。
対応していないテーマの場合は、後述の方法を試してみてください。

テーマ専用の設定画面を使う

有料テーマや多機能テーマには、テーマ独自のオプションページが用意されていることがあります。
「外観」→「テーマオプション」や「テーマ設定」などの名称で見つかることが多いです。
こういったテーマでは、ヘッダー背景・サイドバー背景・各ページごとの背景などを細かく設定できる場合があります。
ご自身が使っているテーマの公式マニュアルをぜひ確認してみてください。

CSSコードで直接指定する

より自由度が高いのが、CSSで背景画像を直接指定する方法です。
カスタマイザーの「追加CSS」や子テーマのstyle.cssにコードを書くことで、テーマに関係なく背景画像を設定できます。
たとえば、サイト全体に背景画像を設定したい場合は次のように書きます。

body {
  background-image: url('画像のURL');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

CSSに慣れている方なら、細かい表示スタイルも自在にコントロールできます。
初心者の方も、コピペで使えるコードを少し覚えておくだけで応用の幅がぐっと広がりますよ。

背景画像の推奨サイズとファイル形式

背景画像を設定するとき、サイズとファイル形式の選択はとても重要です。
適切なサイズでないと画像が粗くなったり、逆にファイルが大きすぎてサイトの表示が遅くなったりします。
SEOにも影響するポイントなので、しっかり押さえておきましょう。

推奨解像度はどのくらい？

サイト全体に使う背景画像の推奨サイズは、横幅1,920px以上が目安です。
最近は大型モニターや高解像度ディスプレイを使うユーザーも増えているため、余裕を持って大きめに用意しておくのが安心です。
高さについては、縦スクロールする場面で画像が繰り返し表示されてもおかしくないよう、デザインを工夫することが大切です。
ファーストビューに1枚だけ見せるスタイルなら、縦幅は1,080px前後を目安にするとよいでしょう。

JPG・PNG・WebPの使い分け

背景画像に使うファイル形式は、内容によって使い分けるのが基本です。

2026年現在、多くのブラウザがWebP形式に対応しているため、WebPでの書き出しが特におすすめです。
古いブラウザへの対応が必要な場合は、JPGとWebPを併用する構成も検討してみましょう。

ファイルサイズを軽くする重要性

いくら高解像度でも、ファイルサイズが大きすぎるとページの表示速度が落ち、SEOにも悪影響が出ます。
背景画像1枚の目安は200KB以内に抑えるのが理想です。
Squoosh（Googleが提供する無料の画像圧縮ツール）などを使えば、画質を維持しながらファイルを軽量化できます。
WordPressのプラグインで画像を自動最適化する方法もあるので、ぜひ活用してみてください。

背景画像の表示スタイルを使いこなす

背景画像は「ただ表示するだけ」でなく、表示スタイルを調整することでデザインの幅がグッと広がります。
CSSのプロパティを理解しておくと、思い通りの見た目が作れるようになりますよ。

全画面表示・固定・繰り返しの違い

背景画像の見せ方を変えるCSSプロパティは主に以下のとおりです。

• background-size: cover　― 画像を全画面に合わせて引き伸ばして表示
• background-attachment: fixed　― スクロールしても背景が動かないパララックス風の表示
• background-repeat: no-repeat　― 画像を繰り返さず1枚だけ表示

特に「background-size: cover」は、画面サイズに合わせて背景画像が自動で拡大・縮小するため、どのデバイスでもきれいに見えるおすすめの設定です。
まず迷ったらこの設定から始めてみてください。

スマートフォンでも崩れない設定方法

パソコンでは綺麗に見えても、スマートフォンで崩れてしまうケースは少なくありません。
特に「background-attachment: fixed」はiOSのSafariで正しく動作しないことが知られています。
メディアクエリを使ってスマートフォン表示では別のスタイルを当てる方法が有効です。

@media (max-width: 768px) {
  body {
    background-attachment: scroll;
    background-size: cover;
  }
}

少し手間はかかりますが、スマホユーザーの体験を守るために大切な対応です。

セクションごとに背景画像を変えるには

ページ全体に同じ背景を使うのでなく、特定のセクションだけ背景画像を変えることもできます。
Gutenberg（ブロックエディター）の「カバーブロック」を使えば、コードなしでセクションに背景画像を設定できます。
また、ElementorやSWELLなどのビジュアルビルダーやテーマを使えば、さらに直感的に背景を設定できますよ。
セクションごとに異なる背景を使うことで、ページにメリハリが出て読者を飽きさせないデザインが作れます。

背景画像が表示されないときの対処法

「設定したはずなのに背景画像が表示されない」「前と変わらない」そんな場面は意外とよくあります。
よくある原因を知っておけば、トラブルに慌てず対処できます。

テーマが「カスタム背景」に対応していない

WordPressのカスタマイザーに「背景画像」が表示されない場合、使っているテーマがカスタム背景機能をサポートしていない可能性があります。
その場合はカスタマイザー経由での設定はできません。
代わりにCSSを使った方法（追加CSSへの直接記述）か、テーマのオプション設定を使いましょう。
テーマを切り替えることも1つの選択肢ですが、その前に公式ドキュメントを確認することをおすすめします。

キャッシュが原因で変更が反映されない

設定を変更したのに画面が変わらない場合、キャッシュが古いまま残っているケースが多いです。
次の手順を順番に試してみてください。

1. ブラウザのキャッシュをクリアする（例：Ctrl+Shift+Delete）
2. WordPressのキャッシュプラグインのキャッシュを削除する
3. CDNを使っている場合は、CDN側のキャッシュもクリアする

この3ステップを試すだけで、多くの場合は解決します。
確認するときはシークレットモード（プライベートブラウジング）を使うと、キャッシュの影響を受けずに確認できますよ。

CSSの競合を確認する

CSSで背景画像を指定したのに表示されない場合は、別のCSSが上書きしている可能性があります。
ブラウザの開発者ツール（F12キー）でbodyや対象要素を選択して、どのCSSが適用されているか確認しましょう。
「取り消し線」が引かれているプロパティは他のCSSに上書きされているサインです。
その場合は、より詳細なセレクタを使うか、記述する場所を変えて優先度を調整してみてください。

SEOと表示速度を守る背景画像の使い方

背景画像は見た目のインパクトが強い反面、使い方を誤るとSEOや表示速度にマイナスの影響が出ることがあります。
せっかく設定するなら、パフォーマンスを損なわない使い方を意識しましょう。

画像の圧縮・最適化は必須

背景画像は画面全体を覆うため、他の画像より解像度が大きくなりがちです。
そのぶん、圧縮して軽量化することが特に重要です。
アップロード前にSquooshやTinyPNGなどのツールで圧縮するのはもちろん、WordPressのプラグインで自動最適化する設定も有効です。
Googleが推奨するCore Web Vitalsの指標「LCP（最大コンテンツ描画）」にも、ファーストビューの背景画像は大きく影響します。
表示速度は2026年現在もSEOの重要な評価基準の1つです。

alt属性と背景画像の関係

CSSで指定した背景画像には、alt属性（代替テキスト）を設定できません。
そのため背景画像はあくまで「装飾」として扱われ、検索エンジンはその内容を画像として評価しません。
SEO観点でテキストと画像の内容を紐づけたい場合は、imgタグを使ってalt属性を設定する方法を検討しましょう。
ビジュアルとして見せながらSEOも意識するなら、両者の使い分けが大切です。

背景画像が多すぎるサイトのリスク

ページごとに大きな背景画像を多用すると、ページ全体の読み込みが重くなり、離脱率が上がるリスクがあります。
背景は「1ページに1〜2箇所」を目安にするのが現実的です。
また、重要なコンテンツ（テキストや見出し）が背景画像に埋もれると、ユーザビリティもSEOも下がります。
背景画像は「引き立て役」として使い、コンテンツを前面に出すレイアウトを意識してください。

まとめ

今回はWordPressの背景画像設定について、設定方法から最適化・トラブル対処まで解説しました。
ポイントをまとめておきます。

• 背景画像の設定方法は「カスタマイザー」「テーマ設定」「CSS直接記述」の3通り
• 推奨サイズは横幅1,920px以上、ファイルサイズは200KB以内が目安
• ファイル形式はWebPが軽量かつ高画質で、2026年時点で多くのブラウザが対応済み
• background-size: coverを使えば、どの画面サイズでもきれいに表示できる
• スマートフォンでは「background-attachment: fixed」が効かないことがあるためメディアクエリで対応する
• 表示されないときはキャッシュ削除・テーマ対応確認・CSS競合チェックの3ステップで対処
• 背景画像はSEO・表示速度にも影響するため、圧縮と最適化を忘れずに

背景画像1つ変えるだけで、サイトの雰囲気はガラッと変わります。
ぜひ今回の内容を参考に、あなたのWordPressサイトを思い通りにカスタマイズしてみてください。