こんにちは、ユアサです。
今回は前回紹介したbackgroundプロパティ（以下backgorundと表記します）で実際にコーディングしてみると同時に、スタイルが反映されなくなる例を書きまとめていきます。
↓前回の記事はこちら
tech.arms-soft.co.jp
背景に画像を設定する
backgroundの基本的な使い方になります。要素の背景に画像を敷いています。
同じパターンを繰り返す幾何学模様のような背景画像であれば特に必要はありませんが、background-repeatを設定していないと画像がリピートで表示されてしまうのでno-repeatを設定しています。
background-positionをcenter center（中央揃え）にし、background-sizeをcoverで設定して縦横比を保ちつつ背景を覆うように表示させています。
See the Pen background-sample01 by felly (@felly00505) on CodePen.
前編でも書きましたが、一括指定の際に書く順番はどれから始めても基本的にOKですが、background-positionとbackground-sizeを一緒に指定する場合は必ず（background-positionの値） / （background-sizeの値）の順番と方法で表記しないといけないルールがあるので、以下のようにスラッシュが無いような場合では実装できませんのでご注意ください。
See the Pen background-sample01_error by felly (@felly00505) on CodePen.
中には色合いが暗い背景画像の場合もあるので、（backgroundとは少し話が逸れますが）視認性を高めるという意味で薄暗いbackground-colorを設定したdivタグなどをz-indexで背景に敷いて、文字色を白くするという工夫もできます。
See the Pen background-sample01_opacity by felly (@felly00505) on CodePen.
上記コードでさらっとz-indexの話が出てきましたが、これについては背景に敷くdivタグにただz-index: -1;を設定するだけでは実装できないので注意してください。よければ以前書いたz-indexの記事も参考にしてみてください。
tech.arms-soft.co.jp
背景画像を固定する
background-attachmentを使ってみた例になります。初期値ではscrollとなっているので要素自身に固定されていますが、fixedで設定すると背景画像が要素の表示領域に固定され、画面スクロール時でもずっと動くことがありません。（ビジュアルに重きを置いたアニメーション多めのキャンペーンサイトなどでよく使われていたりしますね）
前回で紹介していたコードですが、以下の通りになります。
See the Pen background by felly (@felly00505) on CodePen.
テキストに背景を設定する
background-clipを使用する例になります。背景を設定し値をtextで設定すると、背景をテキスト内に切り取って表示させることができます。
こちらも例によってショートハンドで書きます・・・・と言いたいところですが、残念ながらbackground-clip: text;についてはベンダープレフィックスの記述が必要になります。よってbackground-clip: text;のみbackgroundのショートハンドとは別に設定する必要があります。
See the Pen background-sample02 by felly (@felly00505) on CodePen.
またbackground-clip: text;についてはbackground-attachment: fixed;と両立ができないとMDN Web Docsでアナウンスされているので気を付けましょう。（なぜ両立できないのかについては調べきれませんでした・・・判明しましたら追記します。）
ショートハンドの記述におけるbackground-originとbackground-clipについて
background-originとbackground-clip（以下それぞれorigin、clipと表記）の値は、ぞれぞれ意味合いが違えどtext以外まったく同じ表記で値を設定します。では両方を設定したい際にショートハンドで記述する場合はどのように棲み分けすればいいのか？というと、originを先に記述してclipはその後という決まりがあります。
See the Pen background-sample02_origin&clip by felly (@felly00505) on CodePen.
まとめ
前編・後編と二回に分けてbackgroundプロパティの各プロパティの機能とショートハンド記述についての例と注意点をまとめました。
値がずらずら記述されている一見分かりにくそうですが、紐解いていけば大して難しくはないですね。
今回も最後まで読んでいただきありがとうございました（^人^）
