【2026年7月最新】HTMLで背景画像を全画面・繰り返し・固定表示する方法｜ヒーロー実装・パララックス・レスポンシブ対応まで完全ガイド
aikanri-admin
この記事の内容
「ヒーローエリアに背景画像を設定したい」「スクロールしても背景が動かないパララックス効果を作りたい」「スマホで背景が崩れる」——HTMLで背景画像を設定する際によく発生する課題です。
HTMLで背景画像を表示するには、CSSのbackground-imageプロパティを使います。background-repeatで繰り返しを制御し、background-size: coverで全画面表示、background-attachment: fixedで固定スクロールが実現できます。この記事ではコピーしてすぐ使える実装コード集として、よく使うパターンを体系的に解説します。
代表菅澤
AI鬼管理山崎
01 BG IMAGE BASIC HTMLで背景画像を設定する基本（background-image） style属性・CSSファイル・外部URL指定の3方法を比較する
HTMLで背景画像を設定するには、CSSのbackground-imageプロパティにurl()関数で画像パスを指定します。設定先は①インラインstyle属性②<style>タグ内CSS③外部CSSファイルの3種類があります。
📚 用語解説
background-imageプロパティ：CSSで要素の背景に画像を設定するプロパティ。「background-image: url(画像のパス);」の形式で記述します。HTMLの<img>タグとは違い、背景として表示されるため上にコンテンツ（テキスト・ボタン等）を重ねることができます。画像パスは相対パス（../images/bg.jpg）または絶対URL（https://...）で指定します。
| 指定方法 | コード例 | メリット | デメリット |
|---|---|---|---|
| インラインstyle | 手軽に試せる | 管理が煩雑・再利用不可 | |
| <style>タグ | <style>.hero{background-image:...}</style> | 複数要素に適用可 | HTMLとCSSが混在 |
| 外部CSSファイル | .hero{background-image:url(...);} | 最も推奨・保守しやすい | ファイルを分けて管理が必要 |
①画像パスが正しいか（大文字小文字・拡張子・ディレクトリを確認）②対象要素にheightが設定されているか（高さが0だと背景が見えない）③Ctrl+Shift+Iの開発者ツールのネットワークタブで404エラーが出ていないか——この3点を順番にチェックしてください。
02 BG REPEAT 背景画像の繰り返しを設定する（background-repeat） タイルパターン・横繰り返し・繰り返しなしの3パターンを使い分ける
background-imageのデフォルト動作は、要素を埋め尽くすよう画像がタイル状に繰り返し表示されます。background-repeatプロパティでこの繰り返しをコントロールします。
📚 用語解説
background-repeat：CSSで背景画像の繰り返し方向を制御するプロパティ。主な値は「repeat（両方向に繰り返し）」「no-repeat（繰り返しなし）」「repeat-x（横方向のみ）」「repeat-y（縦方向のみ）」「space（均等配置）」「round（リサイズして均等配置）」です。大きな写真をヒーロー画像として使う場合はno-repeatが基本設定になります。
| 値 | 表示のしかた | 使いどころ |
|---|---|---|
| repeat（デフォルト） | 縦横両方向に繰り返す（タイル状） | 小さなパターン・テクスチャ画像 |
| no-repeat | 1枚だけ表示（繰り返しなし） | ヒーロー画像・ロゴ・アイコン |
| repeat-x | 横方向だけ繰り返す | 横ストライプ・ヘッダーライン |
| repeat-y | 縦方向だけ繰り返す | 縦ストライプ・サイドバー背景 |
| space | 均等配置（端に余白あり） | アイコンパターンをきれいに並べる |
03 FULLSCREEN BG 背景画像を全画面表示する実践実装（cover・100vh） ヒーローエリアの完全な実装コードをコピーして使う
Webサイトのトップページで最も多く使われる背景画像の実装が「全画面ヒーローエリア」です。background-size: cover + height: 100vhの組み合わせが基本です。
📚 用語解説
100vh（100ビューポート高さ）：CSSの単位で、ブラウザの表示エリア（ビューポート）の高さの100%を意味します。「height: 100vh」を設定すると、ブラウザウィンドウの高さと同じ高さの要素になります。スマホでもPCでも、画面いっぱいのヒーローエリアを作る際に使います。
3-2. グラデーションオーバーレイを重ねた全画面ヒーロー
白いテキストを背景画像の上に置くとき、画像が明るいと文字が読みにくくなります。background-imageにグラデーションを重ねることで、テキストの視認性を高めつつ画像の雰囲気も活かせます。
url(hero.jpg)
rgba(0,0,0,0.55)
白文字が読みやすい
プロ品質のデザイン
04 FIXED BG 背景画像を固定表示する（background-attachment: fixed） スクロールしても背景が動かないパララックス効果の実装
background-attachment: fixedを設定すると、ページをスクロールしても背景画像だけが固定されたままコンテンツだけが動く「パララックス効果」が生まれます。視覚的なインパクトが強く、Webサイトのアクセントとしてよく使われます。
📚 用語解説
background-attachment：背景画像のスクロール時の動作を制御するCSSプロパティ。「scroll（デフォルト）」では要素と一緒に背景もスクロールします。「fixed」ではビューポート（ブラウザ画面）を基準に固定され、コンテンツだけがスクロールします。「local」では要素内のスクロールに追従します。
iPhoneやiPad（iOS Safari）では、background-attachment: fixedは正しく表示されず、スクロール時に背景が固定されない不具合があります。iOS向けの代替手段として、JavaScriptでスクロール量を取得して「transform: translateY()」で背景画像の位置を動かすJs製パララックスを使うか、モバイルではbackground-attachment: scrollに戻すmedia queryを使う方法が一般的です。
05 BEFORE OVERLAY ::before擬似要素でグラデーションオーバーレイを重ねる background-imageを変更せずにオーバーレイを追加できるテクニック
グラデーションと背景画像をbackground-imageで重ねる方法の他に、::before擬似要素を使ってオーバーレイを追加する方法があります。この方法のメリットは背景画像のCSSを変更せずにオーバーレイの色・透明度だけを調整できる点です。
📚 用語解説
::before擬似要素：CSSで要素の前に仮想的なコンテンツを挿入するセレクタ。content: "" を指定して実際には何も表示せず、position: absoluteで親要素の上に重ねることで、オーバーレイ（半透明の色付きレイヤー）を追加するために使われます。background-imageを持つ要素の親にposition: relativeを設定する必要があります。
::beforeはオーバーレイの色・透明度だけを独立してCSSで制御できるため、「ホバー時にオーバーレイを暗くする」「JavaScriptでオーバーレイ色を動的に変更する」といった動的な演出が作りやすいです。一方、linear-gradient重ね合わせは1プロパティで済むためシンプルです。変更が不要な静的なオーバーレイにはlinear-gradient、動的に変えたい場合は::beforeを使います。
06 BODY BG ページ全体（body）の背景画像を設定する サイト全体に背景を適用するbody設定とbackground-colorとの組み合わせ
ページ全体に背景画像を設定したい場合は、bodyタグにbackground-imageを適用します。background-attachment: fixedと組み合わせると、スクロールしても背景画像が動かないデザインになります。
📚 用語解説
background-color（バックグラウンドカラー）：CSSで要素の背景色を設定するプロパティ。background-imageと同時に指定すると、画像の読み込み中・透明部分・containで空いた余白に背景色が表示されます。「background-color: #1a1a2e;」のように16進数カラーコードやRGB値で指定します。背景画像が読み込まれる前のちらつきを防ぐため、ヒーロー画像には必ずbackground-colorも設定しましょう。
07 RESPONSIVE BG レスポンシブ対応とモバイルでの背景最適化 スマホ用画像への切り替えとパフォーマンス最適化の実践
PCとスマホでは画面サイズが大きく異なるため、同じ背景画像を使うとスマホでは必要以上に大きい画像を読み込むことになりパフォーマンスに影響します。media queryを使ってモバイル用の最適化画像に切り替えましょう。
| 最適化手法 | 削減効果 | 実装コスト |
|---|---|---|
| モバイル用画像を別途用意（1/4サイズ） | データ量70%削減 | 中（画像を別途作成） |
| WebP形式に変換 | 同画質でJPEG比30〜40%削減 | 低（変換ツール使用） |
| background-size coverでリサイズ | クリップで表示最適化 | なし（CSSのみ） |
| Lazy loading（JS） | 初期表示データ削減 | 中（JS実装） |
| background-colorを設定 | 読み込み中の白飛び防止（UX改善） | 低（1行追加） |
08 CLAUDE CODE HTML BG Claude CodeでHTML背景実装を自動生成する 日本語で「こんな背景にしたい」と伝えるだけでCSSが完成
ヒーロー背景・パララックス・オーバーレイの組み合わせは、毎回手作業でCSSを書くと時間がかかります。Claude Codeを使えば、日本語でデザイン要件を伝えるだけで完全なHTML/CSSコードを自動生成できます。
特に便利なのが「画像が表示されない原因を特定する」デバッグ支援です。「background-imageを設定したのに表示されない」という問題の原因（パスミス・高さ0・書式エラー等）をClaude Codeに特定してもらい、修正済みのコードを返してもらえます。
代表菅澤
HTMLの背景画像実装・LP改善をClaude Code×AI鬼管理で高速化
ヒーロー背景・パララックス・グラデーションオーバーレイなど、WebサイトのCSS実装をClaude Codeで自動生成・修正する方法をご紹介します。
AI鬼管理山崎
NEXT STEP
この記事の内容を、あなたのビジネスで
実践してみませんか？
AI活用を自社で回せるようになりたい方へ
AI鬼管理
Claude Code・Cowork導入支援から業務設計・社内浸透まで実践ベースで伴走。「自社で回せる組織」を90日で作る経営者向けトレーニング。
よくある質問
Q. HTMLのbody全体に背景画像を設定するにはどうすればいいですか？
A. bodyセレクタにbackground-imageを設定します。「body { background-image: url('images/bg.jpg'); background-size: cover; background-attachment: fixed; background-position: center; min-height: 100vh; }」のように書くとページ全体に背景画像が表示されます。スクロールしても背景が動かないようにしたい場合はbackground-attachment: fixedを追加してください。
Q. 背景画像を全画面（ブラウザの幅・高さいっぱい）に表示するCSSは？
A. 「background-size: cover; background-repeat: no-repeat; background-position: center; height: 100vh;」の組み合わせが基本です。coverは要素全体を覆うよう画像を拡大・縮小し、100vhはブラウザ画面の高さ100%を意味します。divやsectionに設定する場合はheight: 100vh、bodyに設定する場合はmin-height: 100vhを使います。
Q. background-imageが表示されない原因と解決方法は？
A. 主な原因は①画像パスが間違っている（大文字小文字・拡張子・フォルダ階層を確認）②対象要素のheight/min-heightが設定されていない（高さが0だと見えない）③background-colorが画像の上に表示されている（background-imageはbackground-colorの上に表示されるため通常は問題ないが、opacity等で隠れることがある）——の3つです。F12開発者ツールのNetworkタブで404エラーが出ていないか確認してください。
Q. スクロールしても背景画像が固定されるようにするCSSは？
A. 「background-attachment: fixed」を設定します。ただし、iPhoneやiPad（iOS Safari）では正しく動作しないため、モバイルでは「@media (max-width: 768px) { 要素 { background-attachment: scroll; } }」でscrollに戻す対策が必要です。完全なパララックス効果を実現したい場合はJavaScriptでスクロール位置を取得してbackground-positionを動かすJSパララックスライブラリの使用を検討してください。
Q. 背景画像の上に半透明のオーバーレイを重ねるにはどうすればいいですか？
A. 2つの方法があります。①background-imageにlinear-gradientを重ねる「background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.3)), url('bg.jpg');」②::before擬似要素でオーバーレイを作る「.hero::before { content:""; position:absolute; top:0; left:0; width:100%; height:100%; background-color: rgba(0,0,0,0.5); }」前者がシンプル、後者はオーバーレイの動的変更がしやすいです。
Q. スマホで背景画像をきれいに表示するために必要な対策は？
A. ①モバイル用に最適化した小さいサイズの画像（幅768px以下向け）を別途用意してmedia queryで切り替える②background-position: center topを設定して重要な上部が必ず表示されるようにする③background-attachment: scrollにしてiOS固定背景の問題を回避する④WebP形式の画像を使用してファイルサイズを削減する——の4点が基本的な対策です。
Claude Codeで業務自動化を90日で叩き込む
経営者向けの伴走型パーソナルトレーニング
Claude Code を業務に落とし込む
専門研修コース一覧
受講者本人の業務を題材に、「使いこなせる」状態になるまで伴走する研修プログラム。1対1特化型・ハンズオン・法人講座の3コースを展開中。業務特化・実装まで踏み込むタイプのClaude Code研修です。
研修コース一覧を見る →AI鬼管理へのお問い合わせ
この記事を読んで気になった方へ。
AI鬼管理の専門スタッフが、御社に最適な
業務自動化プランを無料でご提案します。
- AI業務自動化サービス「AI鬼管理」を運営 — Claude Code を活用し、経営者の業務を「AIエージェントに任せる仕組み」へ転換するパーソナルトレーニングを 伴走構築 で提供。日報・採用・問い合わせ対応・経費精算・議事録・データ集計・営業リスト等の定型業務を、AIに代行させる体制を経営者と一緒に作り込む
- Claude Code 実装ノウハウを 経営者・法人クライアント に直接指導。生成AIを「便利ツール」ではなく 「業務を任せる存在」 として運用する手法を体系化
- 「やらせ切る管理」メソッドの開発者。シンゲキ株式会社（2021年設立・鬼管理専門塾運営）にて累計3,000名以上の学習者を志望校合格に導いた管理メソッドを、AI × 経営者支援 に転用
- 著書『3カ月で志望大学に合格できる鬼管理』(幻冬舎)、『親の過干渉こそ、最強の大学受験対策である。』(講談社)
- メディア出演: REAL VALUE / カンニング竹山のイチバン研究所 / ええじゃないかBiz 他
- 明治大学政治経済学部卒
