CSSにおける背景
色と画像で要素の背景をスタイリングできるCSSプロパティ
新着！私の44ページの電子書籍「CSS in 44 minutes」が発売されました！ 😃
#background-attachment
ページスクロール時の背景画像の動作方法を定義します。
デフォルト background-attachment: scroll;
背景画像はページと共にスクロールします。適用された要素に合わせて位置とサイズも調整されます。
background-attachment: fixed;
背景画像はページと共にスクロールせず、ビューポートに合わせて配置されます。ビューポートに合わせて位置とサイズも調整されます。その結果、背景画像は部分的にしか表示されない可能性があります。
#background-clip
背景が要素内でどの程度拡張されるかを定義します。
デフォルト background-clip: border-box;
背景は、ボーダーの下にも完全に要素全体に拡張されます。
background-clip: padding-box;
背景はボーダーの端までしか拡張されません。パディングは含まれますが、ボーダーは含まれません。
background-clip: content-box;
背景はコンテンツの端までしか拡張されません。パディングもボーダーも含まれません。
#background-color
要素の背景の色を定義します。
デフォルト background-color: transparent;
デフォルトでは、背景色は透明です。つまり、背景色はありません。
background-color: red;
140種類以上のカラー名のいずれかを使用できます。
background-color: #05ffb0;
16進数カラーコードを使用できます。
background-color: rgb(50, 115, 220);
rgb()カラーコードを使用できます
- 最初の値は
redです - 2番目の値は
greenです - 3番目の値は
blueです
それぞれ0から255までの値を取ることができます。
background-color: rgba(50, 115, 220, 0.3);
rgba()カラーコードを使用できます
- 最初の3つの値は
rgbです - 4番目の値は
alphaチャンネルで、色の不透明度を定義します
アルファ値は、ゼロ0（透明）から11（不透明）の範囲を取ることができます。
background-color: hsl(14, 100%, 53%);
hsl()カラーコードを使用できます
- 最初の値は
hueで、0から359の範囲を取ります - 2番目の値は
saturationで、0%から100%の範囲を取ります - 3番目の値は
luminosityで、0%から100%の範囲を取ります
background-color: hsla(14, 100%, 53%, 0.6);
hsl()aカラーコードを使用できます
- 最初の3つの値は
hslです - 4番目の値は
alphaチャンネルで、色の不透明度を定義します
アルファ値は、ゼロ0（透明）から11（不透明）の範囲を取ることができます。
#background-image
要素の背景として画像を定義します。
デフォルト background-image: none;
背景画像を削除します。
background-image: url(/images/jt.png);
urlパスで定義された画像を使用します。このパスは、相対パス（CSSファイルに対する）または絶対パス（例：https://cssreference.dokyumento.jp/images/jt.png）のいずれかです。
background-image: linear-gradient(red, blue);
背景画像として線形グラデーションを定義できます。
少なくとも2色を定義する必要があります。最初の色は上から、2番目の色は下から始まります。
デフォルトの角度はto bottom（または180deg）で、グラデーションは上部から始まり、要素の下部に終わる垂直方向です。
background-image: linear-gradient(45deg, red, blue);
角度を指定できます。度数またはキーワードを使用します。
度数を使用する場合、グラデーションの方向、つまりグラデーションが終了する位置を指定します。したがって、0degは要素の上部を意味し、時計の12時の方向です。
この例では、45degは2時30分、つまり右上隅を意味します。
background-image: radial-gradient(green, purple);
背景画像として放射状グラデーションを定義できます。
少なくとも**2色**を定義する必要があります。1色目は中央に、2色目は端に配置されます。
background-image: radial-gradient(circle, green, purple);
放射状グラデーションの**形状**を指定できます：**円形**(circle)または**楕円形**(ellipse、デフォルト)。
background-image: radial-gradient(circle, green 0%, purple 20%, orange 100%);
パーセンテージ値を使用して**カラーストップ**を指定できます。
background-image: radial-gradient(circle closest-side, green 0%, purple 20%, orange 100%);
グラデーションの**終了位置**を指定できます。
closest-side (最も近い辺)closest-corner (最も近い角)farthest-side (最も遠い辺)farthest-corner (最も遠い角)
background-image: radial-gradient(circle closest-side at 45px 45px, green 0%, purple 20%, orange 100%);
background-positionと同様に、グラデーションの**位置**を指定できます。
#background-origin
背景画像の原点を定義します。
デフォルト background-origin: padding-box;
背景画像は枠線の*端*から始まります：パディング内ですが、枠線*内*ではありません。
background-origin: border-box;
背景画像は枠線の**下**から始まります。
background-origin: content-box;
背景画像はコンテンツの端からしか始まりません：パディングも枠線も含まれません。
#background-position
背景画像の位置を定義します。
デフォルト background-position: 0% 0%;
背景画像は水平軸で**0%**、垂直軸で**0%**の位置に配置されます。つまり、要素の左上隅です。
background-position: bottom right;
**位置キーワード**の組み合わせを使用できます：center、top、bottom、left、right。
background-position: center center;
背景画像は要素の中央に配置されます。
#background-repeat
背景位置から開始して、背景画像が要素の背景全体にどのように繰り返されるかを定義します。
デフォルト background-repeat: repeat;
背景画像は**水平方向**と**垂直方向**の両方で繰り返されます。
background-repeat: repeat-x;
背景画像は**水平方向**のみに繰り返されます。
background-repeat: repeat-y;
背景画像は**垂直方向**のみに繰り返されます。
background-repeat: no-repeat;
背景画像は**1回だけ**表示されます。
#background-size
背景画像のサイズを定義します。
デフォルト background-size: auto auto;
背景画像は**元の**サイズを維持します。
たとえば、この背景画像は**960px × 640px**です。アスペクト比は**3:2**です。コンテナ（高さ150px）よりも大きく、そのため**切り取られます**。
background-size: 120px 80px;
**ピクセル**でサイズを指定できます。
- 最初の値は**水平方向**のサイズです。
- 2番目の値は**垂直方向**のサイズです。
background-size: 100% 50%;
**パーセンテージ**値も使用できます。ただし、これにより背景画像の**アスペクト比**が変更され、予期しない結果になる可能性があることに注意してください。
background-size: contain;
キーワードcontainは、背景画像を完全に表示したままにするためにサイズを変更します。
background-size: cover;
キーワードcoverは、要素が完全に覆われるように背景画像のサイズを変更します。