CSSで背景と背景色を使用することは重要ですか？ （はい）

background: #444 url("image.jpg) no-repeat left top;

上記はそのように書くこともできます：

background-image: url(“url/image.jpg”);

background-repeat: no-repeat;

background-position-x: left;

background-position-y: top;

background-color: #444;

つまり、 background プロパティは、1行に複数の宣言を適用し、多くのコード行を節約できる便利な省略形として使用できます。

宣言=CSSプロパティ+値。

background-color 一方、プロパティは背景の色のみを設定できます 要素の。これは、より大きな background のサブセット（一部）のようなものです プロパティ。

重要：backgroundプロパティは以前のすべての宣言をリセットします—注意してください！

以前に要素にさまざまな背景宣言を適用したことがある場合。 background-color またはbackground-image 、後で background：redを追加します 同じ要素への宣言を行うと、以前のすべての宣言がリセットされ、要素の背景が赤になり、背景画像が消えます。

例

このペンの例を見てください。ここには、3つの divがあります。 同じ.boxを持つ要素 クラス。最初の要素には.boxのみがあります クラスですが、他のクラスにも .bg-red のユーティリティ（ヘルパー）クラスがあります および.bg-blue それぞれ。

SeCodePenの例。

違いに気づきましたか？

2番目のボックスはすべて赤で、 .box であっても、画像はありません。 クラスは、他の2つの要素と同じJSイメージを持つ必要があることを明確に指定しています。

HTML

<div class="box">

</div>

<div class="box bg-red">

</div>

<div class="box bg-blue">

</div>

CSS

.box {
	margin: 1rem;
	height: 100px;
	width: 150px;
	background-color: black;
	background-image: url("https://techstacker.com/static/placeholder-thumbnail-javascript-322632ee75bc4a676b0b067b31eaf969.svg");
	background-repeat: no-repeat;
}

.bg-red {
	background: red;
}

.bg-blue {
	background-color: blue;
}

CSSをよく見て、 .bg-redを比較してください。 および.bg-blue プロパティ。赤いクラスは「マスター」（オールインワン） backgroundを使用します プロパティを使用して赤色の値を設定しますが、青色のクラスは単一目的の background-colorを使用します 。

背景 .bg-redのプロパティ classは、2番目のdiv要素にある他のすべての背景宣言を削除するだけです。ここでは -image 、-繰り返し 、 -color 次に、指定した redを追加します その要素の単一の背景属性としての値。