様々な背景を設定しよう

セレクター {
    background-color: 色の値;
}

セレクター {
    /* 背景画像の指定 */
    background-image: url('画像のパス');
    /* グラデーションの指定 */
    background: グラデーションの種類-gradient(色1, 色2);
}

/* 自然風景の背景画像 */
.nature-hero {
    background-image: url('/img/nature1.jpg');
    height: 150px;
}

/* グラデーション背景の指定 */
.gradient-background {
    background: linear-gradient(to right, #ff7e5f, #feb47b);
    height: 150px;
}

<div class="nature-hero">自然風景ヒーロー</div>
<div class="gradient-background">グラデーション背景</div>

セレクター {
    background-position: 水平位置 垂直位置;
}

セレクター {
    background-repeat: 繰り返し方法;
}

セレクター {
    background-size: サイズ指定;
}

/* 背景画像を中央に配置（繰り返しなし） */
.hero-image {
    background-image: url('/img/nature1.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100px;
}

/* 背景パターンを水平方向のみ繰り返し */
.pattern-header {
    background-image: url('/img/nature2.jpg');
    background-repeat: repeat-x;
    background-size: auto 150px;
    height: 100px;
}

/* 背景画像をコンテナに完全フィット */
.full-background {
    background-image: url('/img/nature1.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    height: 100px;
}

<div class="hero-image">ヒーロー画像（カバー）</div>
<div class="pattern-header">パターンヘッダー（水平繰り返し）</div>
<div class="full-background">フル背景（完全フィット）</div>

セレクター {
    background: linear-gradient(方向, 開始色, 終了色);
}

/* 基本的な横方向グラデーション */
.gradient-horizontal {
    background: linear-gradient(to right, #ff7e5f, #feb47b);
    height: 60px;
}

/* 角度を指定したグラデーション */
.gradient-diagonal {
    background: linear-gradient(45deg, #667eea, #764ba2);
    height: 60px;
}

/* 複数色のグラデーション */
.gradient-multi {
    background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1);
    height: 60px;
}

/* 位置を指定したグラデーション */
.gradient-position {
    background: linear-gradient(to right, #ff7e5f 0%, #feb47b 30%, #86ffa5 100%);
    height: 60px;
}

<div class="gradient-horizontal">横方向グラデーション</div>
<div class="gradient-diagonal">斜め45度グラデーション</div>
<div class="gradient-multi">3色グラデーション</div>
<div class="gradient-position">位置指定グラデーション</div>

セレクター {
    background: radial-gradient(形状 サイズ at 位置, 開始色, 終了色);
}

/* 基本的な円形グラデーション */
.radial-basic {
    background: radial-gradient(#ff7e5f, #feb47b);
    height: 60px;
}

/* 正円で中心位置指定 */
.radial-circle {
    background: radial-gradient(circle at center, #667eea, #764ba2);
    height: 60px;
}

/* 位置を左上に指定 */
.radial-position {
    background: radial-gradient(circle at top left, #ff6b6b, #4ecdc4);
    height: 60px;
}

/* 複数色の円形グラデーション */
.radial-multi {
    background: radial-gradient(circle, #ff7e5f 20%, #feb47b 50%, #86ffa5 80%);
    height: 60px;
}

<div class="radial-basic">基本円形グラデーション</div>
<div class="radial-circle">正円グラデーション</div>
<div class="radial-position">左上中心グラデーション</div>
<div class="radial-multi">複数色円形グラデーション</div>

セレクター {
    background: linear-gradient(方向, 色, transparent);
}

/* 上から下へフェードアウト */
.fade-top {
    background: linear-gradient(to bottom, #667eea, transparent);
    height: 60px;
}

/* 左から右へフェードアウト */
.fade-right {
    background: linear-gradient(to right, rgba(255, 126, 95, 0.8), transparent);
    height: 60px;
}

/* 両端からフェードイン */
.fade-center {
    background: linear-gradient(to right, transparent, #4ecdc4, transparent);
    height: 60px;
}

セレクター {
    /* 複数画像の指定 */
    background: url('画像のパス1'), url('画像のパス2');
    /* グラデーションと画像の組み合わせ */
    background: linear-gradient(方向, 色1, 色2), url('画像のパス');
    /* 複数グラデーションの組み合わせ */
    background: linear-gradient(方向, 色1, 色2), linear-gradient(方向, 色3, 色4);
    /* フォールバック */
    background: url('画像のパス');
    background-color: 色;
}

/* キャラアイコンを自然背景に重ね合わせ */
.multi-layers {
    background: 
        url('/img/icon.png') no-repeat right bottom / 60px 60px,
        url('/img/nature1.jpg') no-repeat center / cover;
    height: 100px;
}

/* 透明度を活用したグラデーションと画像の組み合わせ */
.gradient-image {
    background: 
        linear-gradient(45deg, #667eea, transparent),
        url('/img/nature1.jpg');
    background-size: cover;
    background-position: center;
    height: 100px;
}

/* 複数グラデーションの組み合わせ */
.multi-gradients {
    background: 
        linear-gradient(45deg, transparent, rgba(255, 126, 95, 0.4)),
        linear-gradient(-45deg, transparent, rgba(102, 126, 234, 0.4));
    height: 100px;
}

/* フォールバック設定 */
.fallback-example {
    background: url('/img/no-image.jpg');
    background-color: #2c3e50;
    height: 100px;
}