背景に画像を使う方法をまとめました。
background-sizeの値の coverと containの違いが分かりずらかったので動画にしました。
背景に画像を指定する
background-imageプロパティを使って値に url()で画像ファイルのアドレスを指定すると、画像を背景にすることができます。
セレクタを bodyにするとページの背景に、divなどにすればボックスの背景になります。
CSS
body { background-image : url(画像のアドレス) }
画像の表示方法を指定する
背景画像を繰り返す
background-repeatプロパティで背景の画像を繰り返す方法を指定できます。
値はrepeat,no-repeat,repeat-x,repeat-yがあって、表示内容は以下の通りです。
background-imageで画像を指定した場合、repeatが初期値になります。
CSS
body { background-repeat : no-repeat }
背景画像のサイズを指定する
background-sizeプロパティで背景画像の大きさを指定して表示することができます。
幅や高さを数値で指定、auto,、cover、containで指定する方法があります。
coverと contain以外は幅、高さの順で半角スペースで区切って指定します。
CSS
body { background-size : 50% auto }- auto
- 幅と高さ両方に使った場合は元のサイズになり、幅と高さどちらかにのみ使った場合は、縦横比を保ったまま もう一方で指定した数値の大きさになります。
- cover
- 縦横比を保ったまま 画像を拡大縮小して画面に表示領域全体を埋めます。
- contain
- 縦横比を保ったまま 常に画像全体が見えるサイズにします。
coverとcontainわかりずらいですね。。
下の画像で違いがわかると思います。
cover↓
contain↓
coverは常に全体を覆っていますが、containは余白が見えちゃいますね。
背景画像の表示位置を指定する
background-positionプロパティで背景に指定した画像の表示位置を指定できます。
縦や横の位置を数値で指定、またはtop、bottom、left、right、centerで 上下左右、中央で指定します。
数値で指定する場合は、 横方向、縦方向の順で 半角スペースで区切って指定します。
CSS
body { background-position : center }
背景を固定してスクロールしても動かないようにする
background-attachmentプロパティで値を fixedにすると背景画像を固定してコンテンツをスクロールしても動かないようにできます。
値をscrollにすると他のコンテンツと一緒にスクロールします。
CSS
body { background-attachment : fixed}
複数の画像を重ねて背景に指定する
複数の画像を重ねて背景に表示させるには、カンマで区切って追加するだけでOKです。
先に指定した方が上に表示されます。
CSS
body {
background-image : url(balloon.png), url(clouds.png) ;
background-position : center, center ;
background-repeat : no-repeat, no-repeat ;
background-size : 30%, cover ;
}
各画像で位置を指定してるのでウインドウサイズが変わると別々に動きます。
背景関係のプロパティの一括指定
これまでに紹介してきたプロパティは一括で指定することができます。（こういうのをショートハンドっていいます）
必要な値を順不同で半角スペースで区切って指定しますが、positionと sizeは 縦横 2つ指定する必要があるので、以下のルールで指定します。
- 数値がひとつの場合は positionと解釈される
- sizeを指定する場合は 先にpositionを指定してから「/」で区切って sizeの値を指定
CSS
body { url(mountain.png) no-repeat 50% 50% / 100% auto }
