「background」って、確実にコーディングで使うプロパティだと思っていまして、理解は必須だと感じました。簡単に思えて、以外にも手が止まってしまったりするんですよね。模写してて思ったのが、「background」の扱いに慣れるとLPを作るときに楽になりそう。デイトラの課題やPAS-POLの模写もそうだけど、いろんなLPを見ても背景画像は必ず出てくる。初心者がサクサクコーディングできるようになるためには「background」が肝ですね。2019年7月16日この記事では、CSSで背景を指定するプロパティ「background」について解説していきます。まとめ:背景画像をマスターせよ!backgroundの種類についてbackgroundは、位置や色、表示方法などを一括で指定できるプロパティです。まとめて指定できるプロパティとしては、以下のものがあります。background-color・・・要素の背景色background-image・・・要素の背景画像background-repeat・・・背景画像の繰り返しbackground-attachment・・・スクロールしたときの背景画像の表示方法background-position・・・背景画像を表示する水平・垂直位置background-size・・・背景画像の表示サイズbackground-origin・・・背景画像を表示する基準位置background-clip・・・背景画像を表示する領域たくさんありますね・・。いうか使ったことのないものまであります。backgroundはよく使うので、まとめてかけるものであれば短縮して書けた方がコード量も減りますし、CSSもスッキリします。今後のためにも覚えておきましょう!まとめて複数指定する方法まずはサンプルとして、それぞれのプロパティを個別に指定した場合です。CodePen.※すみません、ちょっと見にくいのでこちらから全画面でご覧ください。内容としては、以下のプロパティを背景に指定しています。fixed;background-repeat:no-repeat;背景画像を横幅いっぱいにしつつ、中央に固定しつつ、繰り返ししないという指定ですね。言って、かなり長ったるいし、「background」という単語が何度も出てきているのが気になります。そこで、一括指定したものがこちらです。CodePen.※すみません、ちょっと見にくいのでこちらから全画面でご覧ください。これだけの記述で、上のものと同じ指定をすることができます。no-repeat;特に順番は決まっていなくて、「半角スペース」で区切って指定をすればオッケーですが、一つだけポイントが。cover」の部分ですね。/「background-sizeの値」は固定になりますので、注意が必要です。sizeはスラッシュ「/」で区切るこの2点を理解しておけばとりあえずオッケーだと思います。背景画像はLPとかで使いまくる印象ですし、基本が理解できていれば応用もできるようになるはず。簡単なところで手が止まらないように、とにかくコードを書きまくってなれることが大事ですね。BlogスポンサーリンクスポンサーリンクSearchWebコーダーKohei8年勤めた職場を退職し、完全未経験からWebコーダーに転職しました。