背景色と背景画像を設定する(background)CSSには背景の色を変えたり、画像を設定するためのプロパティとして「background」というものが用意されています。単色だけではなくグラデーションで色を付けたり、いくつかのレイヤーを重ねることもできます。ブックマークHTML・CSSWebデザイン公開日:2019/06/20最終更新日:2019/06/20目次1.背景の色を設定する(background-color)2.背景に画像を設定する(background-image・background-size)3.背景画像の繰り返しと表示位置を制御する(background-repeat・background-position)4.ショートハンドを使って省略して記述する1.背景の色を設定する(background-color)bodyタグに対して背景色を設定してみましょう。背景色を指定するCSSプロパティは「background-color」です。値にはcolorと同様にキーワード・カラーコード・RGB・RGBAが使えます。「background-color」を「#FF0000(赤)」にしてみましょう。#ff0000;}プレビュー:2.背景に画像を設定する(background-image・background-size)背景に画像を設定して、画像のサイズを調整します。背景に画像を設定する(background-image)まずは背景に設定する画像を用意しましょう。PNGもしくはJPEG・GIF形式なら何でも構いません。こちらのサイトからも探せます。https://unsplash.com/画像が見つからったら、cssフォルダの中に保存します。次にCSSプロパティ「background-image」で保存した画像を指定します。このとき画像はファイル名のあとに必ず拡張子(.jpg・.gif・pngなど)を付けてください。;}背景画像のサイズを指定する次に背景画像のサイズを指定します。プロパティ名は「background-size」です。pxや%でも指定できますが、横幅が変わったときに合わせて自動的に変化する値も用意されています。auto(デフォルト)covercontainpx%pxと%は横幅と高さをスペースで区切って指定します。;}coverとcontainについて説明しておきます。背景領域に収まる最大サイズになるように拡大縮小される3.背景画像の繰り返しと表示位置を制御する(background-repeat・background-position)背景画像の繰り返しを制御する(background-repeat)表示領域より背景画像が小さいと、背景は自動的に繰り返し表示になります。この繰り返しについては「background-repeat」というプロパティで制御することが出来ます。値は以下のようなものがあります。repeat(デフォルト)repeat-xrepeat-yno-repeat横並びだけリピートさせるrepeat-x、縦並びだけリピートさせるrepeat-y、繰り返しをなくして1個だけ表示するのをno-repeatで設定します。;}プレビュー:背景画像の表示位置を制御する(background-position)通常、背景画像は要素の一番左上から詰めて並べられますが、「background-position」によって位置を制御することができます。指定できる値は以下のものです。キーワード(top・right・bottom・left)%px%とpxで指定した場合、左上から○%もしくは○px移動する形になります。サイズ・繰り返し・ポジションなどのプロパティを解説してきましたが、これらのプロパティには全て「background-」という接頭文字がついていました。実はこれらのプロパティは、1つのプロパティでまとめて記述することができます。このような複数のプロパティを1つにまとめられる機能のことをショートハンドといいます。記述方法は以下のようになります。;この順番でスペースをあけて区切ります。位置とサイズの間にだけ「/」が必要です。