CSSの背景画像を完全にコントロール！初心者にもわかる繰り返し・位置・サイズの指定

背景画像の繰り返し・位置・サイズの指定（repeat / position / size）

先生と生徒の会話形式で理解しよう

生徒

「背景画像を入れられたんですけど、なんか同じ画像がいっぱい表示されてます…」

先生

「それはCSSのbackground-repeatという設定で、画像が繰り返されているんだよ。」

生徒

「えっ、繰り返しって止められるんですか？あと、画像の位置とか大きさも変えられたりしますか？」

先生

「もちろん！CSSでは背景画像の繰り返し・位置・サイズも自由にコントロールできるよ。詳しく見ていこう！」

1. CSSで背景画像を繰り返すかどうか設定する

CSSでは、background-repeatというプロパティを使って、背景画像を繰り返すかどうかを指定できます。

背景画像をそのまま指定すると、横方向と縦方向の両方に自動で繰り返されます。これが「repeat（リピート）」の状態です。

例えば、小さなアイコン画像を背景に設定した場合、同じ画像がタイルのように並んでしまいます。

繰り返しを止めたいときは、background-repeat: no-repeat; を使います。


<style>
body {
    background-image: url('bg-sample.jpg');
    background-repeat: no-repeat;
}
</style>

<body>
    背景画像が繰り返されません。
</body>

ブラウザ表示

他にも以下の指定ができます：

repeat：横にも縦にも繰り返す（初期値）
repeat-x：横方向だけ繰り返す
repeat-y：縦方向だけ繰り返す

2. CSSで背景画像の表示位置を指定する方法

背景画像の表示される位置は、background-positionというプロパティで設定できます。

例えば、画像をページの右下に表示させたい場合は以下のように書きます。


<style>
div {
    background-image: url('logo.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    height: 200px;
}
</style>

<div>右下にロゴが表示されます。</div>

ブラウザ表示

代表的な指定値：

left：左端
center：中央
right：右端
top：上端
bottom：下端

「中央に表示したい」というときは background-position: center; でOKです。

3. 背景画像の大きさをCSSで指定するには？

background-size を使うと、背景画像のサイズ（大きさ）を指定できます。たとえば画面いっぱいに画像を広げたいときは以下のように書きます。


<style>
div {
    background-image: url('photo.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    height: 300px;
}
</style>

<div>画面いっぱいに画像が広がります。</div>

ブラウザ表示

主な指定方法：

cover：要素全体をカバー（切れることもある）
contain：画像全体が収まるように調整（隙間ができることも）
100px 200px：幅100px、高さ200pxに指定

画面サイズに応じて自動調整したいなら cover が便利です。

4. 背景画像を設定する時の注意点

背景画像を設定する時に気をつけるポイントをまとめます。

画像サイズが大きすぎると、読み込みが遅くなる場合があります。
文字と画像が重なると読みにくくなることがあります。必要に応じて背景に色を重ねたり、文字に影をつける工夫が必要です。
スマホやタブレットなど画面サイズが変わる環境でも見やすいデザインにするため、background-size: cover; や no-repeat を上手に使いましょう。

また、画像のファイル名や保存場所の指定が間違っていると、画像が表示されないので、パスの記述にも注意しましょう。