CSS Background 背景色と画像の設定方法

このページでは、CSSの背景について詳しく解説します。

背景色の設定
背景画像の設定
背景画像の繰り返し
背景画像の位置

背景色の設定

CSSで背景色を設定するには、background-colorプロパティを使用します。色は色名、16進数、RGB、RGBAなどの形式で指定できます。

/* 色名で指定 */
body {
  background-color: red;
}

/* 16進数で指定 */
body {
  background-color: #ff0000;
}

/* RGBで指定 */
body {
  background-color: rgb(255, 0, 0);
}

/* RGBAで指定 (透明度も指定) */
body {
  background-color: rgba(255, 0, 0, 0.5);
}

背景画像の設定

CSSで背景画像を設定するには、background-imageプロパティを使用します。画像ファイルのパスをURLで指定します。

body {
  background-image: url("path/to/your/image.jpg");
}

背景画像の繰り返し

背景画像を繰り返し表示するには、background-repeatプロパティを使用します。以下の値を指定できます。

repeat: 横方向と縦方向に繰り返す (デフォルト)
repeat-x: 横方向に繰り返す
repeat-y: 縦方向に繰り返す
no-repeat: 繰り返さない

body {
  background-image: url("path/to/your/image.jpg");
  background-repeat: no-repeat;
}

背景画像の位置

背景画像の位置を指定するには、background-positionプロパティを使用します。キーワードまたは具体的な座標を使って指定できます。

body {
  background-image: url("path/to/your/image.jpg");
  background-repeat: no-repeat;
  background-position: center center; /* キーワードで指定 */
}

以上のように、CSSの背景を使ってデザインをカスタマイズできます。

CSS 背景