CSSで背景色と背景画像を同時に表示する方法【 background 】

CSSで背景色と背景画像を同時に表示することはできるのかな？ できなくてかれこれ5分悩んでいるよ。泣

こんにちは、かがみ（@cony_tas）です！

先日本業の方でコーディングをしている時にちょっと悩んだ、「background-color」と「background-image」を同時に表示する方法。

実は今まであまりこういった場面がほとんどなかったので、一瞬悩んでしまいましたが意外と簡単にできたので備忘録として記事にしておきます！

CSSで背景色と背景画像を同時に表示する方法

今回やりたいことは下記の画像のような状態です。

下の例ではCSSで背景色を付けて作成したボタンに対して背景画像も同時に適用したい場合です。

失敗例

そこで僕は何気なしにCSSを下記のように記述しましたが、これでは同時に適用されませんでした。

上記の方法だと、下に書いた背景色の「background」で上書きされてしまいます。

成功例

次に成功例です。
下記のようにプロパティを記述すれば、背景色と背景画像を同時に適用することができました。

この書き方なら一つの「background」プロパティにまとめて背景色と背景画像を適用できるので問題ありませんでした。

ちなみにこうやって半角スペースを開けてまとめて指定する書き方を「ショートハンド」と呼びます。

最後に：CSSで背景色と背景画像を同時に表示する方法

今回のようなちょっとした内容を単体記事にするのはどうなのかなと思っていたんですが、僕自身が本業でつまづいた時にこういった記事に助けられているので、同じように困っている方の解決になれば幸いです♪

それでは、また次回！

いつもCony-Tasに遊びにきていただいて、ありがとうございますっ