【2026年2月12日更新】全体の内容を見直すとともに、記事内の情報を最新に更新しました。

この記事のレベル

初心者	（4.0）
重要度	（3.0）
難しさ	（2.0）

こんにちは、編集長のカワウソです！

「ホームページの背景に画像を設定したいけど、方法が分からない……」と悩んでいませんか？

そこで今回は、ホームページ全体の背景に画像を設定する方法を分かりやすく解説します。

この記事を読めば、ホームページの背景に画像を設定するときの注意点も分かりますよ。

また、画像を無料でダウンロードできるフリー素材サイトも紹介しているので、ぜひチェックしてください。

それではどうぞ！

ホームページ全体の背景に画像を設定する方法

ここでは、以下2つの代表的なホームページの作り方に合わせて、背景に画像を設定する方法を解説します。

それぞれ解説します。

WordPressで作るホームページ

WordPressでホームページを作る場合、デザインテンプレート（雛形）である「テーマ」を利用するのが一般的です。

まずは、利用しているテーマに背景画像の設定項目があるか確認し、以下それぞれのケースに合わせた手順を参考に進めましょう。

なお、今回は背景画像として、以下のパターン素材を用います。

参考：フリーテクスチャ素材館「mable-pattern-set」

テーマに背景画像の指定項目がある場合

たとえば、WordPressテーマ『Lightning（ライトニング）』の場合、以下の手順で背景画像を指定できます。

テーマに背景画像の指定項目がない場合

テーマに背景画像の指定項目がない場合は、「追加CSS」で指定しましょう。

HTMLとCSSで作るホームページ

HTMLとCSSでホームページを作る場合、背景画像はCSSで指定します。

なお、今回は背景画像として、以下のパターン素材を用います。

参考：フリーテクスチャ素材感「tesukiwashi-pattern-set」

そのほか、以下のプロパティを用いれば、詳細な設定ができますよ。

プロパティ名	説明
background-position	背景画像の表示位置を指定
background-size	背景画像のサイズを指定
background-repeat	背景画像の繰り返し表示を指定
background-origin	背景画像の基点位置を指定
background-attachment	背景画像の固定・移動を指定

たとえば、背景画像を固定したい（スクロールさせない）場合は、以下の記述になります。

ホームページの背景に画像を設定するときの注意点3つ

ホームページの背景に画像を設定するときは、以下3つのポイントに注意しましょう。

それぞれ解説します。

画像ファイルの容量を圧縮する

ホームページの背景に使う画像ファイルの容量は、ツールなどで圧縮してなるべく小さくしましょう。

画像ファイルの容量が大きいとページの読み込みに時間がかかります。その結果、表示を待ちきれないユーザーの離脱に繋がるかもしれません。

Googleが推奨している1ページのデータ容量は、約1.6MB（1,600 KB）未満です。

ペイロード サイズを小さくする方法

合計バイトサイズを 1,600 KiB 未満に保つようにします。この目標は、Time to Interactive を 10 秒以内に抑えながら、3G 接続で理論上ダウンロードできるデータ量に基づいています。

（引用：Chrome for Developers「過大なネットワーク ペイロードの回避」）

1ページの中に他の画像を使うことも考えると、それぞれの容量をできる限り抑えておく必要があるでしょう。

背景画像は、縦や横のサイズが大きくなりがちです。
そのままでは画像1枚で1.6MBを超えてしまうこともあり、ページの読み込みが遅くなる原因になります。

まずは画像のサイズ（縦横）を必要以上に大きくしすぎないよう調整し、そのうえで圧縮ツールを使って容量を抑えるようにしましょう。

適切なファイル形式を選ぶ

画像のファイル形式も、事前にチェックしましょう。
特殊なファイル形式だと、ブラウザで表示できない場合があります。

背景画像のファイル形式には、一般的に「JPEG（ジェイペグ）」もしくは「PNG（ピング）」を用いることが多いです。

なお、どちらのファイル形式でも表示は可能ですが、画像の種類に合わせて選ぶのがおすすめです。

たとえば、写真のように色の階調（グラデーション）が複雑な場合は、高圧縮で容量を抑えられる「JPEG」が適しています。

一方、色の境界線がハッキリしているイラストには、輪郭がボヤけない「PNG」が向いています。
ただし、PNGでは容量が大きい場合は、JPEGでの利用も検討しましょう。

画像の見た目と容量のバランスを考えて、最適なファイル形式を選んでください。

※画像のファイル形式については、以下の記事でも詳しく解説しています。

著作権を侵害しないようにする

背景画像に限らず、ホームページに第三者の著作物を使用する場合は、注意が必要です。

基本的に画像の著作権は作者が保持しており、無断で使用するとトラブルになるおそれがあります。

フォトグラファーやデザイナーなどから画像を提供してもらう場合は、ホームページでの利用条件を確認しましょう。後々のトラブルを防ぐため、書面もしくはメールなど、記録が残る形で利用承諾を得ることが重要です。

また、通常の画像と違い、背景画像にはクレジットを記載する場所がありません。

そのため、素材サイトなどで画像を探すときは、利用規約を守ったうえで、クレジット表記が不要のものを選ぶことをおすすめします。

背景画像を無料でダウンロードできるフリー素材サイト6選

ホームページの背景に使える画像を探す場合は、素材サイトを利用するのがおすすめです。

ここでは、背景画像を無料でダウンロードできるフリー素材サイトを6つ紹介します。

素材サイト名	会員登録	使用料	商用利用	クレジット表記
フリーテクスチャ素材館	不要	無料	可能	不要
Bg-Patterns	不要	無料	可能	不要
Paper-co	不要	無料	可能	不要
photoAC（写真AC）	必要	無料	可能	不要
Unsplash	不要	無料	可能	不要
CG.foto	不要	無料	可能	不要

各素材サイトの特徴や、どのような背景画像をダウンロードできるかを解説します。

フリーテクスチャ素材館

▲出典：フリーテクスチャ素材館

『フリーテクスチャ素材館』は、背景画像に適した「テクスチャ画像」を無料でダウンロードできるフリー素材サイトです。
背景画像に使いやすい、つなぎ目がないパターン素材をダウンロードできます。

テクスチャとは、質感、手触り、生地、構造などの意味を持つ英語。
『フリーテクスチャ素材館』では、金属や木材などの質感を再現した画像をダウンロード可能です。

Bg-Patterns

▲出典：Bg-Pattrens

『Bg-Patterns』は、背景画像専門のフリー素材サイトで、つなぎ目がないパターン素材をダウンロードできます。

「シンプル」「かわいい」「おしゃれ」など、さまざまな種類の背景画像が無料でダウンロードできます。

また、サイト上でパターン画像のサイズや質感などを指定して、アレンジできるのもポイント。同じ絵柄でも違った印象になるため、まずはサイト上のプレビューで試してみてください。

Paper-co

▲出典：Paper-co

『Paper-co』は、主に紙素材の背景画像をダウンロードできるフリー素材サイトで、全体的に派手さを抑えた風合いの素材が多いのが特徴です。

ダンボール、ノートなど「紙」の以外に木や布の画像もあるため、あわせてチェックしてみるとイメージに合った素材が思いがけず見つかるかもしれません。

photoAC（写真AC）

▲出典：photoAC

『photoAC（写真AC）』は、日本人のモデルや国内の風景などが豊富なフリー素材サイトです。1,000万点以上のフリー素材の中から、使いたい画像をダウンロードできます。

とくに、背景に写真画像を使いたいときに、『photoAC（写真AC）』の利用がおすすめです。

「テクスチャ・背景」のカテゴリを選択したうえでキーワード検索を行えば、数多くの素材のなかからイメージに合った画像を探しやすいでしょう。
さらに、ダウンロードする画像の大きさを選べるため、用途に合わせて使い分けができます。

ただ、素材をダウンロードするためには、会員登録が必要です。
そのほか、ダウンロード前に広告動画を閲覧したり、アンケートに答えたりと、手間がかかるのが面倒に感じるかもしれません。

Unsplash（アンスプラッシュ）

▲出典：Unsplash

『Unsplash（アンスプラッシュ）』は、センスがいい海外の写真をダウンロードできるフリー素材サイトです。

海外の素材サイトであるものの、日本語での検索にも対応。「背景」や「壁紙」と検索すれば、さまざまな素材がヒットします。

会員登録が不要なので、すぐに素材をダウンロードすることが可能です。

CG.foto

▲出典：CG.foto

『CG.foto』は、プロのグラフィックデザイナーが作成したCG画像をダウンロードできるフリー素材サイト。実写の写真では表現しにくい、抽象的なイメージが豊富なのが特徴です。

「ビジネス向け」カテゴリに以外でも、コーポレートサイトで使いやすい画像が揃っています。

とくに、メインビジュアルの背景画像を探している方に重宝するでしょう。

ホームページの背景に関するよくある質問

最後に、ホームページの背景に関する「よくある質問」をまとめました。

まとめ

今回の記事では、ホームページの背景に画像を設定する方法を解説しました。

背景画像の注意点やフリー素材サイトも紹介したので、参考になったのではないでしょうか。

ホームページの背景は、表示面積が大きい分、画像を指定したときのインパクトが大きいです。

魅力的なデザインのホームページを作るために、ぜひチャレンジしてみてください。

それでは、素敵なホームページの完成を願っております。

以上、最後まで読んでいただき、ありがとうございました。

ホームページの開設を検討している方へ

※1 2025年12月時点、W3Techs調べ。
※2 2025年12月時点、エックスサーバー・XServerビジネスにおける法人アカウント数の合計値。

『エックスサーバー』と『XServerビジネス』の違いは、以下の記事で詳しく解説しています。

なお、当メディア「初心者のための会社ホームページ作り方講座」では、初心者の方にわかりやすく会社のホームページを始められる方法を紹介しています！

ホームページの始め方・立ち上げに関する、ご質問・ご相談はツイッターDM( @kawauso_xsv )までお気軽にどうぞ！