背景プロパティにはこんなのがあるよ

背景画像

Webページでは、装飾的な画像効果を出すために背景画像を使うんだ。

1
2
3
4
5
6

div {
    width: 500px;
    height: 300px;
    
    background-image: url(./img/00.jpg);
}

背景画像の繰り返し方

background-repeatには4つの値があるよ。

背景画像の位置

background-positionの値は水平方向の位置 垂直方向の位置だよ。位置の値にはキーワードと座標があるんだ。

キーワードにはleft、right、center、top、bottomがあるよ。

座標は数字+pxを使って、正負どちらもOKだよ。

1
2
3
4
5

div {
    background-position: center top;
    /* 数字とキーワードを混ぜてもいいよ */
    /* background-position: -50px center; */
}

キーワードを一つだけ書いたら、もう一方の方向は中央になるよ。数字を一つだけ書いた場合は水平方向が指定されて、垂直方向は中央になるんだ。

背景画像の拡大縮小

background-sizeにはよく使う3つの属性値があるよ。

• キーワード
  • cover：背景領域を完全に覆うように背景画像を等比率で拡大縮小するよ。画像の一部が見えなくなることもあるかもしれないね。
  • contain：背景領域に完全に収まるように背景画像を等比率で拡大縮小するよ。一部が空白になることもあるかもしれない。
• パーセンテージ：ボックスのサイズに基づいて画像の大きさを計算するよ。
• 数字+単位 (例: px)

パーセンテージが100%だと、画像の幅とボックスの幅が同じになって、高さは等比率で拡大縮小されるよ。

背景画像の固定

background-attachmentを使うと、背景が要素のコンテンツと一緒にスクロールしないようになるんだ。属性値はfixedだよ。

背景画像の複合プロパティ

backgroundプロパティの値は背景色 背景画像 繰り返し方 位置/拡大縮小 固定だよ。順序は関係ないんだ。

1
2
3
4
5
6

div {
    width: 500px;
    height: 500px;
    
    background: aqua url(./img/01.jpg) no-repeat center/cover;
}