ホームページの背景に画像を設定する方法を分かりやすく解説

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

この記事のレベル

初心者 (4.0)
重要度 (3.0)
難しさ (2.0)

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

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

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

カワウソ

この記事は次のような人におすすめ!

  • ホームページ全体の背景に画像を設定したい人
  • 背景画像を設定するポイントを知りたい人
  • 背景画像に使える素材を探している人

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

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

それではどうぞ!

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

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

それぞれ解説します。

WordPressで作るホームページ

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

まず、選んだテーマに背景画像の指定項目があるか、確認してみましょう。

ここでは、以下の2つのケースについて解説します。

それぞれ手順が異なるため、合うほうを参考にしてください。

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

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

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

パターン素材とは

繰り返し表示したときに、つなぎ目が表れない素材のことです。ホームページの背景は、デバイスの画面幅やページの長さによって表示領域が異なるため、素材によっては「つなぎ目」が出てしまう場合があります。

しかし、パターン素材ならつなぎ目が表れないため、ホームページの背景を画像できれいに埋め尽くすことが可能です。

カワウソ

背景画像をダウンロードできる素材サイトは、記事の後半で紹介していますよ!

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

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

STEP1

WordPressダッシュボードのサイドメニューから、「外観 > 背景」をクリックします。

WordPress(外観 > 背景)
STEP2

左メニューから「背景画像」の画面を表示し、画像を選択をクリックします。

WordPress(外観 > 背景 > 背景画像 > 画像を選択)
STEP3

ファイルをアップロード」もしくは「メディアライブラリ」から背景画像を選び、画像を選択をクリックしてください。

メディアライブラリから背景画像を選んで「画像を選択」をクリック
STEP4

公開を押すと、完了です。
※背景画像の詳細設定ができますが、一旦はデフォルトのままにしておいてください。

WordPress(背景画像 > 公開をクリック)
STEP5

ダッシュボード画面左上の「サイトを表示」から、実際のページを確認してみましょう。

WordPress(サイトを表示)
WordPressの背景画像について、有無の比較
メモ

万が一、表示に問題がある場合は、背景画像の設定画面で以下を調整してください。
いろいろと設定を変更して、表示がどのように変わるのか確認するとよいでしょう。

  • プリセット
    デフォルト/フルスクリーン/画面に合わせる/繰り返し/カスタム

「カスタム」を選んだ場合は、以下の項目を細かく調整可能です。

画像の位置 全9パターンの中から、
画像をページのどの位置に設置するかを選べます。
画像サイズ 「元のサイズ/画面に合わせる/フルスクリーン」
の中から、画像の表示サイズを選べます。
背景画像の
繰り返し
背景画像を繰り返すかどうか選べます。
ページと一緒に
スクロール
背景画像を固定するかどうか選べます。
チェックを外すと背景画像が固定され、
スクロールしなくなります。
注意

設定項目において、「背景画像の繰り返し」のチェックを外すと、以下のように背景画像がページの途中で切れてしまうことがあります。パターン素材などを用いる場合は、基本的にチェックを入れておくとよいでしょう。

WordPress(背景画像の繰り返しにチェックを入れない場合)
メモ

WordPressの場合、テーマによって背景画像を指定する項目が変わる場合があります。
詳しくは、テーマのマニュアルをご覧ください。
また、背景画像を指定できないテーマもあります。その場合には、次で説明するCSSを使用する方法で対応しましょう。

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

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

STEP1

WordPressダッシュボードのサイドメニューから、「外観 > カスタマイズ」をクリックします。

WordPress(外観 > カスタマイズ)
STEP2

追加CSSをクリックします。

WordPress(外観 > カスタマイズ > 追加CSS)
STEP3

ここでCSSを記述します。

WordPress(外観 > カスタマイズ > 追加CSS > コード入力)
CSSとは

Cascading Style Sheets(カスケーディング・スタイル・シート)の略で、ホームページのスタイル(見た目)を指定するための言語

CSSの基本的な記述方法は、セレクタ {プロパティ名:値;}です。

説明
  • セレクタ・・・スタイルを適用する要素(対象)
  • プロパティ名・・・適用するスタイルの種類
  • ・・・適用するスタイルの値

たとえば、ホームページ全体の背景画像を指定したい場合は、以下のコードになります。

body {
background-image: url("画像URL");
}

画像URLは、「メディアライブラリ」からコピーしましょう。

WordPress(外観 > カスタマイズ > 追加CSS > コード入力のためにURLをコピー)
STEP4

追加CSSの欄に貼り付けたあと、公開をクリックすれば完了です。

WordPress(外観 > カスタマイズ > 追加CSS > コード入力 > 公開)
STEP5

サイトを表示」から実際のページを確認してみましょう。

WordPress(サイトを表示)
WordPress(背景画像あり)
メモ

画像のサイズや固定(スクロールなし)などの調整が必要な場合は、このあと解説する「HTMLやCSSで作るホームページ」を参考に、CSSのプロパティを追加してください。
※ご自身での対応が難しい場合は、Web制作会社など専門家にご相談することをおすすめします。

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

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

注意

HTMLでも背景画像は指定できますが、現在のバージョンでは非推奨となっているので注意してください。

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

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

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

STEP1

背景画像を変更したい要素(セレクタ)に、プロパティ名「background-image」と値「url(“画像URL”)」を追加(修正)してください。

ホームページ全体の背景画像を指定したい場合は、「body」セレクタにコードを追加します。

▼例

body {
background-image: url("画像URL");
}

HTMLで背景画像を入れる方法(CSSにコード入力)
STEP2

画像ファイルとCSSファイルをアップロード(更新)すれば、設定は完了です。

※ファイルのアップロード方法は、以下の記事で詳しく解説しています。

HTMLで背景画像を入れた場合と入れない場合の比較
メモ

メモ

背景画像が変更されない場合は、ブラウザがキャッシュとして保持した古いデータ(CSSなど)を参照している可能性があります。
スーパーリロード(Windows/Chromeの場合「Ctrl + F5」)もしくは、ブラウザの設定からキャッシュを消して、確認してみてください。

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

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

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

body {
background-image: url("画像URL");
background-attachment: fixed;
}

カワウソ

各プロパティの値については、本記事では便宜上割愛させていただきます。インターネットで検索するとすぐに見つかるため、必要であれば探してみてください。

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

ホームページの背景に画像を設定するときは、以下3つの注意点を押さえておきましょう。

それぞれ解説します。

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

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

画像ファイルの容量が大きいと読み込みに時間がかかり、Webページが表示されるまでに時間がかかってしまいます。

待ちきれないユーザーであれば、ホームページから離脱してしまうかもしれません。

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

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

合計バイトサイズを 1,600 KiB 未満に抑えるようにします。 この目標は、10 秒以下の操作可能時間を達成しながら、理論的に 3G 接続でダウンロードできるデータ量に基づいています。

(引用:Chrome for Developers「膨大なネットワーク ペイロードを避ける」

とくに背景画像は、サイズ(縦横)が大きいものも多いですよね。
1ページの中に他の画像を使うことも考えれば、できる限り容量を抑えておきたいところです。

圧縮しないと、背景画像のみで1.6MBを超えるおそれもあるので、注意しましょう。

カワウソ

あくまでも背景用の画像なので、「どこまで鮮明に表示させる必要があるか」も判断する必要があるでしょう。

画像のファイル形式に注意する

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

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

PNGは「可逆圧縮」のため、保存を繰り返しても劣化しないメリットがあるものの、「JPEG」に比べて容量が大きくなる傾向にあります。

どちらのファイル形式でもよいので、表示に問題がない範囲で、容量が軽いほうを選びましょう。

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

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

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

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

カメラマンやデザイナーなどから画像を提供してもらう場合は、自社のホームページで使用して問題がないか、書面もしくはメールなど、記録が残る形で承諾を得ましょう。

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

画像のクレジットとは

画像の著作者や提供者に関する情報のことです。素材によっては、ホームぺージなどで利用する場合に、クレジット表記をしなければならないものがあります。

次に紹介する素材サイトを利用する場合は、利用規約に定められた範囲内で画像を使用することはもちろん、クレジット表記が不要のものを選びましょう。

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

ホームページの背景を自社で準備できない場合は、素材サイトを利用するのがおすすめです。

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

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

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

注意

素材サイトを利用するときは、必ず「利用規約」を確認してください。利用規約で定められた使用範囲を超えた使い方をしてしまうと、トラブルになるおそれがあります。

フリーテクスチャ素材館

フリーテクスチャ素材感

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

『フリーテクスチャ素材館』は、背景画像に適した「テクスチャ画像」を無料でダウンロードできるフリー素材サイトです。

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

背景画像に使いやすい、つなぎ目がないパターン素材をダウンロードできます。

Bg-Patterns

Bg-Patterns

▲出典:Bg-Pattrens

『Bg-Patterns』は、背景画像専門のフリー素材サイトです。

背景画像に使いやすい、つなぎ目がないパターン素材をダウンロードできます。

さらに、サイト上で画像の色やサイズも自由に指定できるのが、嬉しいポイントです。

Paper-co

Paper-co

▲出典:Paper-co

『Paper-co』は、紙素材の背景画像をダウンロードできるフリー素材サイトです。

紙、段ボール、ノート、木のテクスチャなどの背景画像が多く揃っています。

photoAC(写真AC)

photoAC(写真AC)

▲出典:photoAC

『photoAC(写真AC)』は、日本の素材が豊富なフリー素材サイトです。500万点以上のフリー素材の中から、使いたい画像をダウンロードできます。

キーワード検索はもちろん、「テクスチャ・背景」のカテゴリがあるため、背景画像を探しやすいでしょう。さらに、ダウンロード時に小さいサイズから大きいサイズまで選べるため、用途に合わせて使い分けが可能です。

ただ、素材サイトをダウンロードするためには、会員登録が必要になります。
そのほか、ダウンロード前に広告動画を閲覧したり、アンケートに答えたりと、手間がかかるのがデメリットです。

注意
  • 無料会員だと、1日の検索回数4回、ダウンロード数が9点に制限されます。
  • 無制限にダウンロードするには、月額1,635円のプレミアム会員になる必要があります。

Unsplash(アンスプラッシュ)

Unspluah(アンスプラッシュ)

▲出典:Unsplash

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

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

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

CG.foto

▲出典:CG.foto

『CG.foto』は、プロのグラフィックデザイナーが作成したCG画像をダウンロードできるフリー素材サイトです。

ビジネス向けの画像も用意されているため、コーポレートサイトの背景画像を探している方は重宝するでしょう。

まとめ

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

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

まとめ
  • 背景画像の設定方法は、「ホームページの作り方」によって異なる
  • WordPressのテーマで背景画像を指定できない場合は、「追加CSS」を利用する
  • 背景画像を選ぶときは、容量、ファイル形式、著作権などに注意する
  • フリー素材サイトの画像は、必ず「利用規約に定められた範囲内」で利用する

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

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

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

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

安定度の高いレンタルサーバーをお探しの方へ

エックスサーバーは、高速かつ高い安定性を誇る「高性能レンタルサーバー」です。
国内シェアNo.1のレンタルサーバーであり、19万社の導入実績があります。

2024年4月3日12時まで、サーバー利用料金『半額キャッシュバックキャンペーン』を開催中です!

今なら実質月額495円~とお得にホームページを開設できます!
.comや.netなど大人気ドメインも永久無料と過去最大級にお得です。

さらに、《当社サービスを12ヶ月以上ご利用の方ならどなたでも応募可能
Amazonギフトカード5万円分PlayStation®5などが抽選で106名様に当たる『新生活応援! 春のプレゼントキャンペーン』も同時開催中!

詳細は以下のキャンペーン特設ページをご確認ください。

ぜひこのお得な機会にホームページ開設をご検討ください!

※ 2023年10月時点、W3Techs調べ。

ホームページ制作を無料で依頼したい方

法人向けレンタルサーバー「Xserverビジネス」なら、
ホームページ無料制作サービス」が付いているため、
申し込むだけで2日でホームページが完成します!

ホームページ無料制作サービスの詳細はこちら!

Xserverビジネスだと「.com」以外にも「.co.jp」や「jp」などのドメインも無料になります。

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

これから始める方はこちらのホームページの作り方をぜひご覧ください!

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

カワウソ

当メディアはリンクフリーです。貴社のSNSやブログでご紹介いただけると嬉しいです。

URLをコピーしました!