CSSで背景画像を設定したとき、「同じ画像が何枚も並んでしまう」「スクロールしても背景を固定したい」と思ったことはありませんか？
背景画像の表示方法は、background-imageだけでなく、ほかのCSSプロパティを組み合わせることで調整できます。
特に、模様を繰り返して表示する場合や、スクロールに合わせて背景の動きを変えたい場合に便利です。
この記事では、**背景画像の繰り返しを指定するbackground-repeatと、スクロール時の動きを指定するbackground-attachment**について、基本的な使い方を解説します。
background-repeatで背景画像の繰り返しを設定する
background-repeatは、背景画像を繰り返して表示するかどうかを指定するCSSプロパティです。
小さな模様を背景全体に敷き詰めたり、1枚の画像だけを表示したりできます。まずは基本的な指定方法を確認しましょう。
repeatとno-repeatの違い
background-repeatの代表的な値が、repeatとno-repeatです。
.box {
background-image: url("../images/pattern.png");
background-repeat: repeat;
}repeatは、背景画像を縦方向と横方向に繰り返して表示します。
一方、no-repeatは画像を繰り返さず、1枚だけ表示する指定です。
.box {
background-image: url("../images/bg.jpg");
background-repeat: no-repeat;
}| 指定値 | 表示方法 | 主な用途 |
|---|---|---|
repeat | 縦横に繰り返す | 模様やパターン背景 |
no-repeat | 繰り返さない | 写真やイラストの背景 |
なお、**background-repeatの初期値はrepeat**です。
そのため、小さな画像を指定すると、意図せず何枚も並んで表示されることがあります。
repeat-xとrepeat-yで方向を指定する
背景画像は、繰り返す方向を限定することもできます。
横方向だけに繰り返したい場合は、repeat-xを指定します。
.box {
background-image: url("../images/line.png");
background-repeat: repeat-x;
}反対に、repeat-yを指定すると縦方向だけに繰り返します。
横方向の装飾ラインや、縦に続く模様などを作る場合に便利です。
画像をどの方向に並べたいかによって、指定する値を使い分けましょう。
background-attachmentで背景画像の動きを調整する
background-attachmentは、スクロール時に背景画像をどのように表示するかを指定するCSSプロパティです。
通常のスクロールに合わせて背景を動かすほか、表示領域に対して固定することもできます。
scrollとfixedの違い
background-attachmentの初期値はscrollです。
.section {
background-image: url("../images/bg.jpg");
background-attachment: scroll;
}scrollでは、背景画像は要素に対して固定されます。ページをスクロールすると、要素と一緒に背景も画面上を移動します。
一方、fixedは背景画像をビューポートに対して固定する指定です。
.section {
background-image: url("../images/bg.jpg");
background-size: cover;
background-position: center;
background-attachment: fixed;
}これにより、ページをスクロールしても背景画像が画面に対して固定されたように見える効果を作れます。
ただし、モバイルブラウザではfixedが期待どおりに動作しない場合があります。 実際の端末でも表示を確認しましょう。
localで要素内のスクロールに合わせる
background-attachmentには、localという値もあります。
localは、スクロール可能な要素の内部で、コンテンツと一緒に背景画像を動かす指定です。
.box {
height: 200px;
overflow-y: auto;
background-image: url("../images/bg.png");
background-attachment: local;
}例えば、高さを制限したボックス内に長い文章がある場合、内部をスクロールすると背景も一緒に移動します。
3つの値の違いを整理すると、次のようになります。
| 指定値 | 背景画像の動き |
|---|---|
scroll | 要素に対して固定され、要素内部のスクロールには追従しない |
fixed | ビューポートに対して固定される |
local | 要素内部のコンテンツと一緒にスクロールする |
一般的なWebサイトではscrollが基本です。
特殊な背景演出を作りたい場合に、fixedやlocalを検討するとよいでしょう。
【まとめ】背景画像の繰り返しと固定を使い分けよう
CSSの背景画像は、background-repeatとbackground-attachmentを使うことで、繰り返し表示やスクロール時の動きを調整できます。
background-repeatでは、模様を並べるrepeatや、画像を1枚だけ表示するno-repeatがよく使われます。
また、background-attachmentでは、通常のscrollに加え、背景を固定するfixedや、要素内のスクロールに合わせるlocalを指定できます。
例えば、背景写真を繰り返さずに表示する場合は、次のように記述します。
.hero {
height: 400px;
background-image: url("../images/bg.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}背景画像の用途に合わせて、繰り返し方とスクロール時の動きを選ぶことが大切です。
基本の指定を理解したら、模様の背景や固定背景など、さまざまな表現に活用してみましょう。