HTML初心者必見！バックグラウンド画像の活用術10選

📋 対応バージョン

HTML HTML5

CSS CSS3

JavaScript ES6+

Chrome 58+ ⓘ

Firefox 55+ ⓘ

Safari 12.1+ ⓘ

Edge 15+ ⓘ

IE 11 ⓘ

完全対応一部機能制限 ⓘ

はじめに

バックグラウンド画像は一瞬にしてページの雰囲気を変え、訪問者の目を引きつける力を持っています。しかし、HTML初心者にとって、この魔法の使い方は少し難しく感じるかもしれません。

そこで、この記事では、誰でも簡単にバックグラウンド画像を活用できる方法を10個紹介します。

使い方や対処法、注意点、カスタマイズ例など、具体的なサンプルコード付きで丁寧に解説していきますので、最後までお付き合いください。

この記事を読み終えた時、あなたはウェブページを魅力的にカスタマイズする新しいスキルを身につけているはずです。

●バックグラウンド画像とは

ウェブページの背景に画像を表示することで、見た目が一気に華やかになり、ユーザーの興味を引くことができます。

静的なテキストや単色の背景だけでは伝えきれない雰囲気や情報を、バックグラウンド画像を使うことで効果的に表現できるのです。

例えば、自然の写真を背景に使えば、瞬時に「環境」や「リラックス」といったイメージを訪問者に与えることができます。

また、抽象的なパターンを使用すれば、モダンでスタイリッシュな印象を作り出すこともできるでしょう。

バックグラウンド画像は、ウェブサイトの個性を表現する強力なツールなのです。

●バックグラウンド画像の設定方法

バックグラウンド画像を設定する方法は主に2つあります。

インラインスタイルを使用する方法と、外部CSSファイルを使用する方法です。それぞれの特徴と使い方を見ていきましょう。

○インラインスタイルでの設定

インラインスタイルは、HTMLタグ内に直接CSSを記述する方法です。

この方法は、特定の要素にのみスタイルを適用したい場合や、急いでデザインを変更したい場合に便利です。

次のように記述することで、バックグラウンド画像を簡単に設定できます。

<div style="background-image: url('画像のURL');">
  <!-- ここにコンテンツを書く -->
</div>

この方法は簡単ですが、同じスタイルを複数の要素に適用したい場合や、後からデザインを変更する必要がある場合には、効率が悪くなる可能性があります。

そのような場合は、次に紹介する外部CSSファイルを使用する方法がおすすめです。

○外部CSSファイルでの設定

外部CSSファイルを使用すると、HTMLとCSSを分離することができ、コードの管理がしやすくなります。

また、複数のページで同じスタイルを使い回すことができるため、効率的です。

次のようにHTMLファイルとCSSファイルを作成してください。

HTMLファイル

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="background-image">
    <!-- ここにコンテンツを書く -->
  </div>
</body>
</html>

CSSファイル(styles.css)

.background-image {
  background-image: url('画像のURL');
}

この方法を使えば、複数の要素や複数のページで同じバックグラウンド画像を簡単に適用できます。

また、後からデザインを変更したい場合も、CSSファイルを編集するだけで済むので便利です。

●バックグラウンド画像のサイズ調整

バックグラウンド画像を設定したものの、画像が小さすぎたり大きすぎたりして思い通りの表示にならないことがあります。

そんな時は、CSSのbackground-sizeプロパティを使ってサイズを調整しましょう。

このプロパティを使えば、画像を要素全体にフィットさせたり、特定のサイズに固定したりすることができます。

.background-image {
  background-image: url('画像のURL');
  background-size: cover; /* 画像が要素全体に収まるように調整 */
}

coverを指定すると、画像が要素全体を覆うように自動的にサイズが調整されます。

他にも、contain（画像全体が表示されるように調整）や、具体的な数値（例：100% 100%）を指定することもできるでしょう。

要素のサイズや画像の内容に応じて、最適な設定を選んでみてください。

●バックグラウンド画像の繰り返し表示

デフォルトでは、バックグラウンド画像は要素全体を埋めるように繰り返し表示されます。

しかし、これが望ましくない場合もあるでしょう。

例えば、ロゴ画像を背景に使用する場合、繰り返し表示されると不自然に見える可能性があります。

そんな時は、CSSのbackground-repeatプロパティを使って繰り返し表示をコントロールしましょう。

.background-image {
  background-image: url('画像のURL');
  background-repeat: no-repeat; /* 画像を繰り返し表示しない */
}

no-repeatを指定すると、画像は1回だけ表示されます。

他にも、repeat-x（横方向にのみ繰り返し）やrepeat-y（縦方向にのみ繰り返し）など、様々な設定が可能です。

画像の内容や望む効果に応じて、適切な設定を選択してください。

●バックグラウンド画像の位置指定

バックグラウンド画像の配置も重要なポイントです。

画像を中央に配置したい場合もあれば、左上や右下に寄せたい場合もあるでしょう。

そんな時は、CSSのbackground-positionプロパティを使って画像の位置を自由に指定できます。

.background-image {
  background-image: url('画像のURL');
  background-position: center; /* 画像を中央に配置 */
}

center以外にも、top、bottom、left、rightなどのキーワードや、具体的な数値（例：50px 100px）を使って位置を指定できます。

画像の内容や要素のデザインに合わせて、最適な位置を探してみてください。

●複数のバックグラウンド画像の表示

１つの画像だけでなく、複数の画像を重ねて表示することで、より複雑で魅力的な背景を作ることができます。

CSSのbackground-imageプロパティに複数の画像URLを指定することで、この効果を簡単に実現できます。

.background-image {
  background-image: url('画像のURL1'), url('画像のURL2');
}

この方法を使えば、例えば透明な模様を前面に、風景写真を背面に配置するといった表現が可能になります。

複数の画像を使うことで、単一の画像では実現できない奥行きのある背景を作り出せるのです。

重なり順序について注意が必要です。カンマ区切りで記述した順序に従って画像が重なり、最初に指定した画像が最前面に表示されることを覚えておきましょう。

●バックグラウンド画像の透明度調整

時として、バックグラウンド画像が強すぎて、その上に配置したテキストが読みにくくなることがあります。

そんな時は、画像の透明度を調整することで、テキストの可読性を向上させつつ、背景の雰囲気も保つことができます。

CSSの::before疑似要素を使って、この効果を実現しましょう。

.background-image {
  position: relative; /* 疑似要素の基準位置を設定 */
}

.background-image::before {
  content: '';
  background-image: url('画像のURL');
  opacity: 0.5; /* 透明度を50%に設定 */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}

この方法を使えば、背景画像の透明度を自由に調整できます。

opacityの値を変更することで、画像の透明度を細かく制御できます。0に近づけるほど透明になり、1に近づけるほど不透明になります。

テキストの色や内容に合わせて、最適な透明度を見つけてください。

●バックグラウンド画像のスクロール制御

デフォルトでは、ページをスクロールするとバックグラウンド画像も一緒に動きます。

しかし、画像を固定したままにすることで、独特の視覚効果を生み出すことができます。

これは、視差効果の基本となる技術でもあります。

CSSのbackground-attachmentプロパティを使って、この効果を簡単に実現できます。

.background-image {
  background-image: url('画像のURL');
  background-attachment: fixed; /* 画像を固定表示に設定 */
}

fixedを指定すると、ページをスクロールしても背景画像が動かなくなります。

これで、コンテンツが画像の上を滑るように移動する効果が生まれ、ページに奥行きと動きを与えることができるでしょう。

特に、風景写真や抽象的なパターンを背景に使用する場合、この効果は非常に効果的です。

●バックグラウンド画像の適用範囲

バックグラウンド画像は、ページ全体に適用することもできますし、特定の要素にのみ適用することもできます。

例えば、ヘッダー部分だけに特別な背景を設定したい場合があるでしょう。

そんな時は、対象の要素にCSSクラスを指定して、そのクラスにバックグラウンド画像を設定します。

HTMLファイル

<header class="header-background">
  <h1>ウェブサイトのタイトル</h1>
</header>

CSSファイル

.header-background {
  background-image: url('ヘッダー用画像のURL');
  background-size: cover;
  background-position: center;
}

このように、特定の要素にクラスを指定してバックグラウンド画像を設定することで、ページの特定の部分だけを華やかにしたり、重要な情報を強調したりすることができます。

ヘッダーやフッター、サイドバーなど、ページの構造に合わせて効果的に使い分けてみてください。

●バックグラウンド画像の最適化

バックグラウンド画像を使用する際、見た目の美しさだけでなく、ページの読み込み速度やユーザー体験も考慮する必要があります。

ここでは、バックグラウンド画像を最適化するための4つのポイントを紹介します。

○画像フォーマットの選択

バックグラウンド画像には、JPEG、PNG、SVGなど、様々なフォーマットがあります。

それぞれに特徴があるので、用途に応じて適切なフォーマットを選択することが重要です。

写真のような複雑な画像にはJPEGが最適で、ファイルサイズを小さく保ちながら高品質な表示が可能です。

PNGは透明度が必要な画像や色数が少ないグラフィックに適しており、ロゴやアイコンなどの単純な画像に向いています。

SVGはベクター形式のため、拡大縮小しても品質が劣化しません。そのため、ロゴマークやシンプルなイラストには最適な選択肢となります。

○画像圧縮

大きなファイルサイズの画像は、ページの読み込み速度を低下させる原因となります。

そのため、画像を圧縮してファイルサイズを削減することが重要です。

オンラインの画像圧縮ツールを使用すれば、簡単に画像を最適化できます。

ただし、圧縮しすぎると画質が劣化する可能性があるので、バランスを取ることが大切です。

○レスポンシブ対応

現代のウェブサイトは、様々な画面サイズのデバイスに対応する必要があります。

CSSのメディアクエリを使用することで、デバイスの画面サイズに応じてバックグラウンド画像を変更することができます。

ここでは、画面サイズに応じて異なる画像を表示する例を紹介します。

.background-image {
  background-image: url('small-image.jpg');
}

@media (min-width: 768px) {
  .background-image {
    background-image: url('medium-image.jpg');
  }
}

@media (min-width: 1200px) {
  .background-image {
    background-image: url('large-image.jpg');
  }
}

○レイジーローディング

ページの読み込み速度を向上させるために、バックグラウンド画像の遅延読み込み（レイジーローディング）を実装することができます。

この技術では、画像が実際に表示される直前まで読み込みを遅らせることで、初期のページ読み込み時間を短縮できます。

JavaScriptのIntersection Observer APIを使用した実装例を紹介します。

<div class="lazy-background" data-bg="actual-image.jpg">
  <!-- コンテンツ -->
</div>

.lazy-background {
  background-color: #F1F1F1; /* プレースホルダーの色 */
  min-height: 400px; /* 要素の高さを設定 */
}

.lazy-background.loaded {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

document.addEventListener("DOMContentLoaded", function() {
  const lazyBackgrounds = document.querySelectorAll(".lazy-background");

  if ("IntersectionObserver" in window) {
    const lazyBackgroundObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          const lazyBackground = entry.target;
          const bgImage = lazyBackground.dataset.bg;
          
          // 画像を事前読み込み
          const img = new Image();
          img.onload = function() {
            lazyBackground.style.backgroundImage = `url('${bgImage}')`;
            lazyBackground.classList.add("loaded");
          };
          img.src = bgImage;
          
          lazyBackgroundObserver.unobserve(lazyBackground);
        }
      });
    });

    lazyBackgrounds.forEach(function(lazyBackground) {
      lazyBackgroundObserver.observe(lazyBackground);
    });
  }
});

この実装では、要素がビューポートに入った時点で画像の読み込みが開始され、読み込み完了後に背景として設定されます。

特に、多数の大きな背景画像を使用しているページで効果的です。

●バックグラウンド画像の応用例

バックグラウンド画像の基本的な使い方を理解したら、さらに一歩進んで、より高度な技術を使ってウェブページを魅力的にすることができます。

ここでは、パララックス効果とグラデーション効果という2つの応用例を紹介します。

○パララックス効果

パララックス効果は、スクロールに応じて前景と背景が異なる速度で動く視覚効果です。

この効果を使うと、ウェブページに奥行きと動きを与え、ユーザーの興味を引きつけることができるでしょう。

JavaScriptを使用した本格的なパララックス効果の実装例を見てみましょう。

<div class="parallax-container">
  <div class="parallax-element" data-speed="0.5">
    <img src="background-image.jpg" alt="背景画像">
  </div>
  <div class="content">
    <h2>コンテンツセクション</h2>
    <p>ここに通常のコンテンツを配置します。</p>
  </div>
</div>

.parallax-container {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 1px;
}

.parallax-element {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateZ(-1px) scale(2);
}

.parallax-element img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content {
  position: relative;
  background-color: white;
  z-index: 1;
  padding: 20px;
  margin-top: 50vh;
}

window.addEventListener('scroll', function() {
  const scrolled = window.pageYOffset;
  const parallaxElements = document.querySelectorAll('.parallax-element');
  
  parallaxElements.forEach(function(element) {
    const speed = element.dataset.speed;
    const yPos = -(scrolled * speed);
    element.style.transform = `translateY(${yPos}px)`;
  });
});

この実装では、スクロール量に応じて背景画像の位置を計算し、前景よりも遅い速度で移動させることで、真のパララックス効果を実現しています。

○バックグラウンド画像のグラデーション

バックグラウンド画像の上にグラデーションを重ねることで、画像の視認性を調整したり、独特の雰囲気を作り出したりすることができます。

CSSのlinear-gradient関数を使って、この効果を簡単に実現できます。

.gradient {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('画像のURL');
  background-size: cover;
  background-position: center;
  color: white; /* テキストの色を白に設定 */
  padding: 20px;
}

このコードでは、半透明の黒いグラデーションを画像の上に重ねています。

これで、画像が少し暗くなり、その上に配置したテキストが読みやすくなります。

グラデーションの色や透明度を調整することで、様々な効果を生み出すことができるでしょう。

例えば、次のように使用します。

<div class="gradient">
  <h2>魅力的なタイトル</h2>
  <p>グラデーション効果により、この文章が背景画像の上でも読みやすくなっています。</p>
</div>

この技術は、ヒーローセクション（ページの最上部にある大きな画像セクション）で特によく使われます。

背景画像の上にテキストを配置する際、グラデーションを使うことで、画像の雰囲気を保ちながらテキストの可読性を確保することができるのです。

まとめ

この記事で紹介した方法を基礎として、さらに自分なりのアイデアを加えていくことで、唯一無二のウェブデザインを生み出すことができるでしょう。

ぜひ、様々な方法を試してみて、あなたのウェブサイトを魅力的で印象的なものに仕上げてください。