backgroundを指定する時に、上側と下側違う色設定したいな～ってことがあります。

背景色を2色設定したい

いろんな方法があると思いますが、

今回はcssだけで2色の指定を。

background:linear-gradient(180deg,gray 0%,gray 50%,yellow 50%,yellow 100%);

これだけ。

(180deg,gray 0%,gray 50%,yellow 50%,yellow 100%);

この部分でいろの変化の向きを指定しています。

0deg (下から上へ)
90deg (左から右へ)
180deg (上から下へ)
270deg (右から左へ)

(180deg,gray 0%,gray 50%,yellow 50%,yellow 100%);

この部分で0％から50％までの背景の色を指定しています。

(180deg,gray 0%,gray 50%,yellow 50%,yellow 100%);

この部分で50％から100％までの背景の色を指定しています。