CSS

CSSで背景を自由にカスタマイズ！background-image・repeat・size・positionの基本

Webサイトの背景を自由に変更できると、デザインの幅がぐっと広がります。

例えば、背景に画像を設定したり、サイズや配置を調整することで、より魅力的なページを作ることができます。

この記事では、CSSの背景関連のプロパティ（background-image・background-repeat・background-size・background-position）を学びながら、実際に試してみましょう！

背景画像を設定する（background-image）

background-imageとは？

background-image を使うと、要素の背景に画像を設定できます。

実際に試してみよう！

次のHTMLを作成して、index.html として保存してください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>背景画像を設定しよう</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="background-image">
        背景に画像を設定しました！
    </div>
</body>
</html>

CSS（style.css）

次に、以下のCSSを作成し、style.css に保存してください。

.background-image {
    width: 600px;
    height: 300px;
    background-image: url('https://source.unsplash.com/600x300/?nature');
    border: 1px solid #ccc;
}

背景に画像が表示されると思います。

背景の繰り返しを設定する（background-repeat）

background-repeatとは？

背景画像はデフォルトで繰り返して表示されますが、background-repeat を使うと、繰り返しの制御ができます。

値の種類

値 説明
repeat デフォルト（画像が繰り返される）
no-repeat 画像を1回だけ表示
repeat-x 横方向に繰り返し
repeat-y 縦方向に繰り返し

実際に試してみよう！

.background-repeat {
    width: 600px;
    height: 300px;
    background-image: url('https://source.unsplash.com/100x100/?pattern');
    background-repeat: repeat-x;
    border: 1px solid #ccc;
}

background-repeatの値を変えて、それぞれどんな動きをするのか見てみましょう。

背景のサイズを調整する（background-size）

background-sizeとは？

background-size を使うと、背景画像の大きさを調整できます。

値の種類

値 説明
auto 画像の元のサイズを維持（デフォルト）
cover 要素全体をカバーするように拡大・縮小
contain 画像全体を表示し、余白ができる場合もある

実際に試してみよう！

.background-size {
    width: 600px;
    height: 300px;
    background-image: url('https://source.unsplash.com/800x600/?city');
    background-size: cover;
    border: 1px solid #ccc;
}

background-sizeの値を変えて、それぞれどんな動きをするのか見てみましょう。

背景の位置を調整する（background-position）

background-positionとは？

background-position を使うと、背景画像の表示位置を調整できます。

値の種類

値 説明
left top 左上
center center 中央（よく使われる）
right bottom 右下

実際に試してみよう！

.background-position {
    width: 600px;
    height: 300px;
    background-image: url('https://source.unsplash.com/800x600/?technology');
    background-position: center center;
    background-size: cover;
    border: 1px solid #ccc;
}

background-positionの値を変えて、それぞれどんな動きをするのか見てみましょう。

問題集

Q1. 背景画像を設定するプロパティは？

  1. background-image
  2. background-color
  3. background-size

Q2. 背景を中央に配置するには？

  1. background-position: left top;
  2. background-position: center center;
  3. background-position: right bottom;

✅ 答え: Q1→1, Q2→2

まとめ

  • background-image で背景画像を設定する
  • background-repeat で画像の繰り返しを調整する
  • background-size で背景の大きさを変更できる
  • background-position で背景の表示位置を決められる

シェア！

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

RECOMMENDこちらの記事も人気です。