CSSのbackground-imageを使って背景画像を表示させます。
多様なシチュエーションで利用され、Webサイトのデザインや機能性を向上させるために不可欠なプロパティです。
主なシチュエーションとして
ヒーローセクション/メインビジュアル:
WEBサイトのトップページや記事などで、目を引く大きな画像（風景、人物、製品など）を背景に配置し、サイトのテーマやページのメッセージを伝えるために使われます。
どんな画面サイズでも美しく表示されるようにします。
パターンやテクスチャ
シンプルな背景色だけでは物足りない場合に、繰り返し表示される小さな画像（パターン、テクスチャ、グリッドなど）を背景に設定し、視覚的な奥行きや質感を与えます。
アイコン
ボタン、リスト項目、ナビゲーションリンクなどの小さな要素にアイコンを表示する場合。
フォーム要素やボタンのカスタマイズ
デフォルトのフォーム要素（例: チェックボックス、ラジオボタン）やボタンのデザインをCSSでカスタマイズする際に、チェックマークや矢印などのアイコンを背景画像として利用します。
コードパターン ヘッダー
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景画像の例1</title>
<style>
/* 例1: 固定された大きな背景画像 */
.hero-section {
background-image: url('https://picsum.photos/id/1018/1200/800');
/* 広い風景の画像URL */
background-repeat: no-repeat;
/* 画像を繰り返さない */
background-position: center center;
/* 画像を上下左右の中央に配置 */
background-size: cover;
/* 要素全体を覆うように画像を拡大縮小（はみ出す部分があってもOK） */
/* レイアウトのための追加スタイル */
height: 400px;
/* 要素の高さ */
display: flex;
/* 子要素を中央に配置するためにフレックスボックスを使用 */
flex-direction: column;
/* 子要素を縦に並べる */
justify-content: center;
/* 子要素を垂直方向の中央に */
align-items: center;
/* 子要素を水平方向の中央に */
color: white;
/* テキストの色 */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
/* テキストに影をつけて読みやすくする */
font-family: sans-serif;
}
.hero-section h1 {
font-size: 3em;
margin-bottom: 10px;
}
.hero-section p {
font-size: 1.2em;
}
</style>
</head>
<body>
<header class="hero-section">
<h1>ようこそ！素敵な場所へ</h1>
<p>ここであなたの夢を見つけよう</p>
</header>
</body>
</html>
プレビューパターン ヘッダー
コードパターン リピート
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景画像の例2</title>
<style>
/* 例2: リピートするパターン背景 */
.pattern-background {
background-image: url('https://www.transparenttextures.com/patterns/cubes.png');
/* 小さなパターン画像URL */
background-repeat: repeat;
/* 画像を縦横両方に繰り返す (これがデフォルトなので省略可能ですが、明示的に書くことで意図が伝わります) */
background-position: 0 0;
/* 左上を基準に開始 (デフォルトなので省略可能) */
background-size: auto;
/* 画像の元のサイズを使用 (デフォルトなので省略可能) */
/* レイアウトのための追加スタイル */
padding: 30px;
border: 2px solid #ccc;
margin: 20px;
background-color: #f0f0f0;
/* 背景画像が見えやすいように背景色も指定 */
font-family: sans-serif;
line-height: 1.6;
}
</style>
</head>
<body>
<div class="pattern-background">
<p>このブロックはパターン柄の背景を持っています。</p>
<p>小さな画像が繰り返されて模様になっています。</p>
</div>
</body>
</html>
プレビューパターン リピート
